テーマ作成にチャレンジしています
カスタマイズをするにも、基本的な知識がないと難しいと思い、テーマ作りから始めました。
このブログのデザインが自作テーマです。といっても本を頼りに作ったのですが。
これからはサイト作りと併用して、公開テーマのカスタマイズに取り組んでみようと思います。
自分で作るよりは絶対に格好がよいです。
素晴らしいテーマ「Suffusion（サフュージョン」を、「気まま日記」ブログに設置しました。
このテーマの素晴らしいところは、編集画面から様々なカスタマイズができるというところです。
初めに、Skinning のTheme selection から、テーマを選びました。
次に、Icon ｓｅｔｓ から、アイコンのセットを選びました。
選んだあとは、右側にある 「Save/Ｒｅｓｅｔ」ボタンを押して保存します。
サイドバーを2列にしてみました。
「Layouts」の左側「2Right Sidebars」をクリックします。詳細設定はしていません。
2列はうっとぉしいので1列に戻すから(＾＾;
記念に画像を載せておきます。
写真を入れることが多いので、黒い画面にしてみようかな。
カテゴリのツリー表示はうまくいかないので、あきらめモードで、今日はコメントリストを表示してみた。
プラグインは、Comment_entry_list 。またもや小粋空間よりダウンロードさせていただいた。
そのまま使う分には、作業はとても簡単。
<li><h2>最近のコメント</h2> <ul> <?php get_recently_commented(); ?> </ul> </li>
コメントリストの表示、「コメント投稿者」→「日付」に順番を入れ替えた。
基本的なテーマができたので、カスタマイズを開始しました。
まず、サイドバーの見出しにバナー（自作）を付けました。
つぎに、サイドバーの項目（箇条書き）の、先頭にイメージファイルを設定しました。
スタイルシートの中は次のようになりました。
ローカルでテストして、結果を試してからスタイルシートをそっくりWebサイトに転送しています。
Webサイトでもテーマの編集は可能ですが、CSSで書いたものをすぐに確認できるという意味では、ローカルサイトがやりやすいです。
div#sidebar h2{
font-size: 0.75em;
color: #666666;
padding-bottom: 8px;
background-image: url(./images/titlebar.png);
background-repeat: no-repeat;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding-left:25px;
padding-top: 4px;
}
１からテンプレートを作り、基本的なところが大体終わったので、実験ブログから記事を引っ越してきました。もっとも抜粋したものだけですので、これを読んでも他人はちんぷんかんぷんかも。
デザイン的なものはまだこれからだし、プラグインなど１つも入れていません。
これから少しずつ実験的に入れていこうと思いますが、どうなることやら。
ということで、ここまで作ったテーマをこのブログに適用してみます。
既存のテーマに比べると、相当ダサいですけど、これから少しずつネ
ヘッダー用画像は、くりまんさんからお借りしました。
写真が素敵なので、使いたい気持ちが湧きます。
背景画像も管理画面から変更できるが、bodyタグを下記のように変更しなければならない。(3.3以降）
<body <?php body_class(); ?>>
function.php には、下記タグを追加
add_custom_background();
＜head＞＜/head＞の中に次の1行を追加する
<?php wp_head(); ?>
管理画面で自由にヘッダーを変更できるのが便利。挑戦してみたけどエラーで真白くなってしまい結構手こずってしまったので忘備録しておくことにした。
function.php で設定するのだが、ここで何度やっても真っ白けに。
そこで、日本語のコメントをすべてとってみたら、行けた。
ネット友のくりまんじゅうさんの素敵な写真をまたもや無断でお借りした(^^;
function.php の最後（？＞の前）に次ぎのようなタグを入れる。
カスタムヘッダーの機能を有効にするための設定だ。
add_custom_image_header('','admin_header_style');
function admin_header_style() {
?>
<style type="text/css">
#headimg {width: 900px!important}
</style>
<?php
}
define('NO_HEADER_TEXT',true);
define('HEADER_IMAGE','%s/default_header.jpg');
define('HEADER_IMAGE_WIDTH',900);
define('HEADER_IMAGE_HEIGHT',200);
次に、header.php の設定。
ここで、ヘッダー画像の場所を直接指定していたが、これを次のように変更する。
<p id="image"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>"/> </p>
ヘッダーを変更する管理画面はこんなだ。
固定ページは、page.php というテンプレートを作って編集する。
index.php の内容をすべてコピーした後、サイドバーの段組みを削除して、1段組みにする。
さらにコメント部分や投稿情報なども削除する。
スタイルシートには次のように、横幅を広げる設定をする。
/*固定ページ*/
div#content.page {width: 100%}
開始時は、メインインデックスとスタイルシートだけあればよかったのだけれど、固定ページを作成したりすると、ヘッダーやフッターは共有できるほうがよい。テンプレートも左図のように増えた。
そこで、index.php を分割して、header.php と footer.php を作った。その部分を index.php から移動してくるだけ。
index.php から、呼び出すには
<?php get_header(); ?>
のような、テンプレートタグを使う。
function.php はウィジェットを使うために必要なテンプレート。
フィードを自動で検出させるためには、index.php の ヘッダー（head） の中に、次のようなタグを入れておきます。
さらに、フィードを表示させたい箇所（この場合はサイドバー）に、次のタグを入れます。
上で指定したfeedクラスは、スタイルシートでデザインをします。
文字サイズの指定や、アイコンなどです。説明省略(^^;