トップページのデザインだけ変更できるプラグインの作成
トップページのデザインだけを変えるプラグインを作成しましたので紹介します。この要望をかなえようとした方の記事の方法でも問題ないでしょうが、プラグインにて実現できる点で本記事の方が便利かも知れません。それでは下にサンプル画面を示します。この例ではトップページのみヘッダー画像とタイトル文字色が変化しています。
トップページのみデザインが変更できるプラグイン
本サイトから「トップページデザインを変更できるプラグイン」をダウンロードして解凍してプラグインホルダに入れ、これを有効化してください。
中身は非常に単純で下がそのソースになっています。
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 を変えればよいのかというと、詳細は以下の通りです。
- 現在のテーマがデフォルトである leggero だとする。/fp-intereace/themes/leggero/
- この下にまた同じ名前の leggero/ が存在しているので、ディレクトリごと leggero2/ として複製する。
- スタイルファイルである eggero2/res/style.css は同ディレクトリ内の common.css をインクルートしている。
- スタイルの実態を決めている 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;
}
...
...
...