FlatPress.info

Information & blog

トップページ変更プラグイン

トップページのデザインだけ変更できるプラグインの作成

トップページのデザインだけを変えるプラグインを作成しましたので紹介します。この要望をかなえようとした方の記事の方法でも問題ないでしょうが、プラグインにて実現できる点で本記事の方が便利かも知れません。それでは下にサンプル画面を示します。この例ではトップページのみヘッダー画像とタイトル文字色が変化しています。

leggero2-ani-gif

トップページのみデザインが変更できるプラグイン

本サイトから「トップページデザインを変更できるプラグイン」をダウンロードして解凍してプラグインホルダに入れ、これを有効化してください。

中身は非常に単純で下がそのソースになっています。

changeheader/plugin.changeheader.php

<?php
/*
Plugin Name: Change Header
Plugin URI: http://flatpress.info                                                                                                            
Description: change header
Author: flatpress.info
Version: 0.1
Author URI: http://flatpress.info/                                                                                                           
*/

function change_header() {
    global $fp_config, $theme;
    if(!$_GET)
        $fp_config['general']['style'] = 'leggero2';
}
add_filter( 'init', 'change_header');
?>

 内容として $fp_config['general']['style'] が設定されたテーマのスタイルシートを示しているので、これを変更しているだけです。この例では leggero2 となっています（詳細は後述しています）。トップページであるかの有無のチェックには URL 変数が付いていないことで調べています。このチェック部分を entry  ID や static  ID と比較してカスタマイズする方法もあるでしょう。ちなみに、フックしている部分は 'init' となってます。当初は header.tpl （{action hook=wp_head}）をフックして実験してみたのですが、すでにこの header.tpl が動作する時点では css が働いてしまっていました。強引に css を再設定したのですが、一瞬ヘッダー画像が変わるのが見えることがありました。ちなみに、$fp_config には下のような配列変数が入ってました。

 

$fp_config:
{ ["general"]=> array(13) {
	["www"]=> string(50) "http://flatpress.info:8170/TEST/flatpress-1.0.2/"
	["title"]=> string(9) "FlatPress"
	["subtitle"]=> string(17) "My FlatPress blog"
	["footer"]=> string(0) ""
	["author"]=> string(5) "admin"
	["email"]=> string(22) "このメールアドレスはスパムボットから保護されています。閲覧するにはJavaScriptを有効にする必要があります。
	["startpage"]=> NULL
	["maxentries"]=> string(1) "5"
	["notify"]=> bool(true)
	["theme"]=> string(7) "leggero"
	["style"]=> string(7) "leggero"
	["blogid"]=> string(11) "fp-40736ed1"
	["charset"]=> string(5) "utf-8"
	}
	["locale"]=> array(6) {
		["timeoffset"]=> string(1) "2"
		["timeformat"]=> string(8) "%H:%M:%S"
		["dateformat"]=> string(13) "%A, %B %e, %Y"
		["dateformatshort"]=> string(8) "%Y-%m-%d"
		["charset"]=> string(5) "utf-8"
		["lang"]=> string(5) "en-us"
		}
	["plugins"]=> array(1) {
		["blockparser"]=> array(1) {
			["pages"]=> array(2) {
			[0]=> string(4) "menu"
			[1]=> string(5) "about"
			}
		}
	}
}

($fp_config は global 変数となっている）

 

さて、テーマのどの部分の css を変えればよいのかというと、詳細は以下の通りです。

  1. 現在のテーマがデフォルトである leggero だとする。/fp-intereace/themes/leggero/
  2. この下にまた同じ名前の leggero/ が存在しているので、ディレクトリごと leggero2/ として複製する。
  3. スタイルファイルである eggero2/res/style.css は同ディレクトリ内の common.css をインクルートしている。
  4. スタイルの実態を決めている common.css のヘッダー画像とタイトル色などを好みに変更する。

common.css の一例：

/* leggero2 */
/* ===== HEAD ===== */
#head {
    font-family: 'book antiqua', georgia, garamond, times, 'times new roman', serif;
    padding: 95px 10px 5px 5px;
    margin: 10px;
    background: #c37676 url('../imgs/Windows_computer_wallpaper.jpg');
    border: #bbb 1px solid
}

#about h3 {
    color: red;
} 
...
...
...

 

マウスオーバーで検索詳細表示

検索結果画面での表示機能の増強計画を完了しました。

Flatpress の検索機能については、デフォルトではタイトルが検索され、詳細検索についてはタイトルを空白にしておき、[検索]押して詳細入力画面を出す手順となります。このあたりをカスタマイズして、デフォルトで記事内容検索としておくのもよいと思います。

ところで、検索結果の画面(search_result.tpl)は、search.php が検索した結果として、タイトルのみが表示されます。これではジャーナル（日誌）として利用している場合には、この検索自体はあまり意味を持たず、またクリックして内容違いであった場合はいちいちブラウザの画面で検索結果画面に戻ることが必要で、これはとても面倒です。

そこで今般、「マウスオーバーで検索詳細を表示」する機能改造を計画しました。この機能は Flatpress の深い部分（例えば、bbcode 記法を html に変換）が含まれているので、完成するまでにかなりの時間を要しました。また、プラグインとして増強することも難しい感じで、今般は search.php と search_result.tpl の両方の入れ替えが必要となりました。下に検索動作サンプルのアニメーションgif画面をお示しします。このように検索内容が簡単に見えてきますので、それはそれは便利になったと思っています。

search-adv

また、デフォルトでの検索窓の動作はタイトルサーチになっています。その場合ですと、内容抽出に至りませんから、以下のような注意メッセージが出力されます。ちなみに、検索機能についてはもう少しどうにか強化できるといいのですが。

search adv msg

変更手順

この機能増強をする手順は次の通りです。

  1. / 直下にある search.php を保存しておく（例えば、search.php.ORGに複製しておく）。
  2. /fp-interface/sharedtpls/search_results.tpl 保存しておく（例えば、search_results.tpl.ORGに複製しておく）。

本サイトのsearch-adv.zip (クリックでダウンロード)と search_results-adv.zip-adv.zip (クリックでダウンロード)をそれぞれダウンロードして解凍し、上記のプログラムおよびテンプレートを入れ替える。

パッチを利用される方はこれ(search.php.patch)をダウンロードしてご利用ください。解凍後に"patch < search.php.patch"してください。

 

以上で冒頭で説明している高次な機能が利用できるようになります。

 

＜補足＞

  1. テンプレートの方は、マウスオーバーで追加されてくる html コードを入れ込んでいるだけなので、１行しか改変点はありません。
  2. search.php のプログラムについては、どのあたりが改変されたのかを参考のために、diff として掲載しておきます。考え方としては、search.php 内での検索結果を処理するルーチン部分において、有効検索されたコンテンツをマウスオーバーの状態のみ表示されるような css の組み合わせと一緒に smarty の変数に収容しておくことにしました。
 diff search.php.ORG search.php 
161a162,169
>
>
>           if ($e['content']) {
>             search_adv($e['content']);
>           } else {
>             search_adv("<div id=\"search_msg\">フルテキストサーチに切替えてください。</div>");
>           }
>
226a235,292
>
>
> function search_adv($search_cont) {
>   global $smarty;
>
> $contS = <<<_EOT_
> <style>
> div.starting_point {
>   position: absolute;
>   display: inline;
> }
> div.opener > div.longtext {
>   display: none;
> }
> div.opener:hover > div.longtext {
>   position: absolute;
>   display: block;
>   top: 0px;
>   left: 20px;
>   color :#fff;
>   background: rgba(0,0,0,0.2);
>   padding: 10px;
>   font-size: 12px;
>   line-height: 1.5;
>   width:460px;
> }
>
> div.opener:hover pre {
>   background: rgba(0,0,0,0.2);
>   white-space: -moz-pre-wrap; /* Mozilla */
>   white-space: -pre-wrap;     /* Opera 4-6 */
>   white-space: -o-pre-wrap;   /* Opera 7 */
>   white-space: pre-wrap;      /* CSS3 */
>   word-wrap: break-word;      /* IE 5.5+ */
> }
>
> div#search_msg {
>   text-align: center;
>  color: red;
> }
>
> </style>
> <div class="starting_point">
> <div class="opener">
> _EOT_;
>
>                 /* Add content display */
>                $contM = "<div class=\"longtext\">";
>                $contM .= "<p class=\"pre\">";
>                $contM .= BBCode($search_cont);  /* convert souce to html */
>                $contM .= "</p>";
>                $contE = "</div></div></div>";
>
>                 $smarty->assign('discriS', $contS);
>                 $smarty->assign('discriM', $contM);
>                 $smarty->assign('discriE', $conteE);
>
> }

 

テンプレート表示バージョン

テンプレート位置と URL 引数

 

テンプレートの位置の一例はしたに示すようになっています。この表の詳細を説明しようと考えたのですが手間がかかりそうでしたので、実際にインストールしてみればわかるように使用テンプレート表示がなされるバージョンを作っておきました。これは別記事の「テンプテート適用場所の調査」で利用したプログラムにて改変されたバージョンとなります。本サイトのからダウンロード（flatpress.info/ZIP/flatpress-1.0.2-DispTplt.zip）してインストールしてください。通常にインストールするだけで下方に示すようなテンプテートが読めるものになります。（各テンプレート表示をさせる行は、オリジナルテンプレートの一番最後に追加しているので適用場所と表示場所がずれていることもありますので注意してください）

 

flatpress.world/?x=entry:entryXXXX  エントリー表示

 

index.tpl

 

header.tpl

 

 

 
shared:entryadminctrls.tpl

　　　　　　

 

 

 
widgets.tpl

 

 

entry-default.tpl

 

 

 

 

 

 

 
footer.tpl
 

 

 

URLの引数はこのようになっています。

  1. flatpress.world/?x=entry:entryXXXX  エントリー表示
  2. flatpress.world/?x=cat:XX  カテゴリー表示
  3. flatpress.world/?x=y:XX;m:XX  アーカイブ表示（年;月）

 

テンプレート位置が表示された例（前述のテンプレート表示バージョンをインストールした場合）

flatpress-1.0.2-DispTplt

 

Admin area

Categories

plugin:categories/widget

Archives

Last 1 entries

 
w

ブログに便利なプラグイン作成

日誌に便利な自動日付入力とカレンダーによるアクセスを可能に

ジャーナル（日誌）を付けていると、タイトルとしての日付の入力をおっくうに感じることがありました。そこで、ボタン一つでタイトルに日付が入り、また、カレンダーの日付をクリックすると当日のジャーナルが表示できるようなプラグインを作ることにしました。これから完成した状態を説明していきます。

bbcodeAdv2-newpost-today

新規作成（ポスト）をすると上記のような画面になります。注目点は、

  1. [Today]ボタンが追加されており、クリックするとタイトルに「日付と曜日」が入力される。
  2. [CLR]ボタンもあって、これをクリックするとタイトルがクリアされる。
  3. 同時にカテゴリの[ジャーナル]のチェックがオンオフされる。
  4. カレンダーが表示されていて日付をクリックすると当日の記事にジャンプする。
  5. 日誌が登録されているかどうかは日付の文字色で容易に確認できる。

というように便利な機能が実現されています。最後の機能ですが「あれ？昨日は日誌を付けたっけ？！」というように、記録忘れをチェックできるところは非常にありがたい機能となりました。

ダウンロードについては「ブログに便利なプラグイン」からお願いします。

下のスナップショットはカレンダーの日付をクリックして該当する日付の記事を呼び出しているものです。

bbcodeAdv2-newpost-calender

このカレンダー機能については幾つか補足をしておきます。

  1. カレンダー上部の”＜”と">"部分をクリックするとカレンダーの表示月を前後することができます。
  2. 日誌タイトル（例えば、2015-02-12,Thu)が検索キーになっているので、これに相当しないと表示はされません。
  3. 同じ日付タイトルが存在した場合には、一方しか表示されません。
  4. その月のデータを検索しますので、別の月に同一日付タイトルがあっても発見はされません。

 

ところで、ボタンやカレンダー表示の位置がテーマによっては異なる位置となります。実はこれについて、本プラグインの開発ではオリジナル（デフォルト）のテーマで位置決めをしてあります。なので、このようにインストール時のデフォルトのテーマの方が位置合わせがぴったりしているのです。（タイトル欄を若干狭めています）

bbcodeAdv2-originalTheme-newpost-today

次に、本プラグインのインストールについてですが/fp-plugins/ 配下にこのプラグインを展開後、以下のようにイネーブルにしておき、表示されている"bbcoceAdv2"の設定画面で二つの設定をします。

bbcodeAdv2-enable

設定欄が二つあります。上部はプラグイン機能の表示有無ですから"ON"または"OFF"に設定してください。下の欄はジャーナル（日誌）のカテゴリの自動チェックですから、カテゴリー名の"ジャーナル"が "cat[9]"であったらそのようにすれば良いので、みなさんの実例に合わせてください。（cat[9]とは、カテゴリ設定画面での記述としては"ジャーナル:9"という表現に相当します）

bbcodeAdv2-setting

まさにこのプラグインは私的カスタマイズの頂点ともいえる反面、さてはて、皆様が活用していただけるかどうか？　いかがでしょうかね。

おまけ

本プラグインの作成に当たってはいろいろと勉強になりました。以下、まさに備忘としてメモを残します。

  1. 標準テンプレートを利用した場合ではタイトル（サブジェクト）をフックできるボタンを付けるポイントがないのでした。簡単に済ませるにはテンプレートにボタンを表示する Smarty 変数を付加すればよいのですが、それでは改造となってしまいます。そこで、toolbar をフックすることになりました。
  2. 次に、タイトル部への日付挿入なのですが、これがややこしくて PHP や smarty 変数を通じて変更ができませんでした。テンプレートの流れとして、新規投稿の状況ではタイトル表示が value="" というようにハードコーティングされてました。ここでこれを打破すべくタイトル設定を javascript で行うことを考えました。ご承知のように PHP はサーバ側で動作し、Javascript はＰＣのブラウザ側で動作しています。javascript と PHP で変数をやり取るするサンプル例がネット上に散見されてますが、実はそれは純粋に二者が独立して動作している場合なのでした。つまり、本件では PHP が javascript のソース自体を作りだしているので、なんのことはない、PHP 変数（ジャーナルタイトル日付）を文字列で渡してあげるだけだったのです。

 

FlatPess 記事

こんな資料あんな情報

周囲の環境

Copyright c  flatpress.info 2015. All Rights Reserved.

Joomla template created with Artisteer.