タイトルのみ表示モードの追加

コンテンツのタイトルのみを表示する

これまでは、日誌（ジャーナル）を目的にカスタマイズを進めてきました。そして、タイトルを日付として想定しています。ところで、備忘録としての利用を考えた場合には、同然にタイトルはほぼユニークになると思いますし、画像も入ってくると想定されます。例えば、下がサンプルです。（同コンテンツは、ここから借用＝http://www.fleapedia.com/）

実際にはたくさんの記事があるのですが、一部のみが表示されています。ジャーナルで一覧を表示させるとすれば、１か月分と思いますので、１ページに表示させる記事は、多くて３１個分の記事で、自分の要望としてはそうなってます。この個数設定は「管理エリア」の設定値で行います。

以上の設定として使おうと考えると、１ページに表示されるタイトルが数個となり、それ以上はスクロールしないといけませんね。このスクロールの手間を省く方法として、簡単に思いつくのはタイトルだけ表示させればよいでしょう。ただし、本文を意識して内容を調べるのではなく、タイトルをキーにして調べるやり方となります。それは好みによると思いますが、タイトルのみの表示形態をさせるためのカスタマイズをすることにします。

一覧を表示しているテンプレート

$smode の値が真（＝タイトルのみ表示）でない場合には、通常表示となるように, if 文を挿入して判定しています。縦方向の表示の幅を縮めるために、「投稿者とコメント追加」部分の表示を省略します。（下記のコメントアウトしている部分）

/fp-interface/themes/leggero/entry-default.tpl

        <div id="{$id}" class="entry {$date|date_format:"y-%Y m-%m d-%d"}">
                                {*      using the following way to print the date, if more      *}
                                {*      than one entry have been written the same day,          *}
                                {*       the date will be printed only once                             *}

                {$date|date_format_daily:"<h2 class=\"date\">`$fp_config.locale.dateformat`</h2>"}

                                <h3>
                                <a href="/{$id|link:post_link}">
                                {$subject|tag:the_title}
                                </a>
                                </h3>
                                {include file=shared:entryadminctrls.tpl}



<!-- FlatPress.info -->
{if !$smode}
                                {$content|tag:the_content}
{/if}

<!-- FlatPress.info -->
                                <ul class="entry-footer">
<!--
                                <li class="entry-info">Posted by {$author} at
                                {$date|date_format}
                                {if ($categories)} in {$categories|@filed}{/if}
                                </li>

                                {if !(in_array('commslock', $categories) && !$comments)}
                                <li class="link-comments">
                                <a href="/{$id|link:comments_link}#comments">{$comments|tag:comments_number}
                                        {if isset($views)}(<strong>{$views}</strong> views){/if}
                                </a>
                                </li>
                                {/if}
-->

                                </ul>
<!--
                        {$date|date_format_daily:"<h2 class=\"date2\">`$fp_config.locale.dateformat`</h2>"}
-->
        </div>

記事表示部分テンプレートを改造する

上記の詳細です。タイトルだけ表示されるようになればよいので、表示しているテンプレートを見つけて以下を追加しておきます。また、投稿日時と投稿者、それにコメント機能は不要なので削除しておきました。
fp-interface/themes/leggero/entry-default.tpl

＊[編集][削除]の部分を表示しています。
{include file=shared:entryadminctrls.tpl}

＊シュリンクモードでないなら通常表示としています。
<!-- FlatPress.info -->
{if !$smode}
                                {$content|tag:the_content}
{/if}

＊投稿者名とコメント追記を表示しないようにしている
<!--
                                <li class="entry-info">Posted by {$author} at
                                {$date|date_format}
                                {if ($categories)} in {$categories|@filed}{/if}
                                </li>

                                {if !(in_array('commslock', $categories) && !$comments)}
                                <li class="link-comments">
                                <a href="/{$id|link:comments_link}#comments">{$comments|tag:comments_number}
                                        {if isset($views)}(<strong>{$views}</strong> views){/if}
                                </a>
                                </li>
                                {/if}
-->

＊投稿した日付を表示しないようにしている。
<!--
                        {$date|date_format_daily:"<h2 class=\"date2\">`$fp_config.locale.dateformat`</h2>"}
-->

タイトルのみの表示設定表示を追加する

設定ボタンを表示させるために、テンプレートに以下を追加します。ここでの動作の意味は「ショートモード＝タイトルのみ表示」を設定するチェックボタンをオンまたはオフとして、TITLE ボタンを押すとそれが動作(index.php)するものとなります。（チェックボタンの設定は inde.php に引き継がれて表示されます）

/fp-interface/themes/leggero/index.tpl

                <div id="main">

<!-- FlatPress.info -->
<!-- {$smode} -->
        <form id="smode" method="get" action="index.php">
        {if $smode}
            <input type="checkbox" name="m" value="smode" checked>
        {else}
            <input type="checkbox" name="m" value="smode">
        {/if}
        {$add_url}
        <input type="submit" name="submit" value="SET">
        </form>



                {entry_block}

                        {entry}
                        {include file='entry-default.tpl'}
                        {/entry}

                        <div class="navigation">
                                {nextpage}{prevpage}
                        </div>

                {/entry_block}

                </div>

設定値を保持して再表示させる

index.php がメインプログラムとして動いているので、ここに以下を追加します。動作の様相としては「URLのGETパラメータに変数 m があって、その中身が "smode"(タイトルのみのショート表示)であれば、Smarty 変数の smode に "title"を入れておく」動作です。

/fp-interface/index.php

        function index_main() {

                global $fpdb, $smarty, $fp_config, $fp_params;
                $params = array();
                $module = 'index.tpl' ;
                $can404 = true;

        // FlatPress.info
        if ($_GET['m'] == "smode") {
          $smarty->assign('smode', 'title');
          $flag = "smode";
        } else {
          $smarty->assign('smode', '');
          $flag = "";
        }

どのようになったかな

まずは通常の記事を表示する画面です。ヘッダー下部、すなわち記事部分上部に「□ SET」という設定ボタンがつきました。利用方法は、このようにします。

チェックボタンがあるので「タイトルのみ」の表示をしたい場合にはチェックを入れます。
上記設定ののち、SETをクリックするとタイトルのみの表示となります。
通常表示に戻りたい場合は、このチェックを外してSETのボタンを押します。

smode(shrinkモード）で表示させて場合はこのように変化します。

SETのボタンの大きさを小さくする

上図はレイアウト上、うるさくないように、以下のCSSを加えて、小さめにボタンを表示させています。

/fp-interface/themes/leggero/leggero/res/common.css

#smode {
  display: inline;
}

#smode input {
  margin: 0 0 2px;
  padding: 0;
  font-size: 80%;
}

それと、[編集][削除]の表示位置を少し上に持ち上げて、よりシュリンクさせています。

.admincontrols {
margin-top: -20px;
padding-bottom: 10px;
}

FlatPress.info

Information & blog