ウィジェットが使用できるようファンクションファイルを追加する

サイドバーを追加するにあたって、ワードプレスで用意されている便利な機能、
視覚的、感覚的にサイドバーメニューを操作できる、ウィジェット機能をぜひ使いたいものです。

しかし、独自テーマでは最初、ウィジェット機能は無効になっていて使用できません。
これを使えるようにするため、functions.phpというファイルを追加して、
関数を書き込みます。

まず、ロリポップのユーザー専用ページ左側「WEBツール」から、「ロリポップ!FTP」をクリックします。
「wp-content」→「themes」→「kihon(作成している独自テーマのフォルダ名)」と進んだら、
上段にあるアイコンの「新規ファイル作成」をクリックします。

ファイル名に「functions.php」と入力し、ファイルの属性を「755」に変更します。
下段のテキスト入力エリアに、下記のソースを入力したら、「保存する」ボタンをクリックします。

---------------------
<?php

?>
---------------------

 
すると、ワードプレスの「テーマの編集」の画面に、
「functions.phpファイル(テーマのための関数)」が追加され、編集画面から作業ができるようになります。

さっそく、functions.phpファイル(テーマのための関数)を選択し、
ウィジェットを使用可能にするための下記のコードを入力、保存します。

---------------------
//ウィジェット
register_sidebar();

---------------------

 

 
これで、ウィジェットが使えるようになりました。
ワードプレスの管理画面で、「外観」→「ウィジェット」をクリックすると、
サイドバーメニューが表示されるので、サイドバーに表示させたいメニューを、
右側の「サイドバー1」まで、ドラッグ&ドロップします。

試しに、「最近の投稿」と「カテゴリー」をサイドバーに追加してみました。

 

 
しかし、ここまでの作業ではまだ、サイトにサイドバーは画面に表示されません。
サイドバーの表示方法は次の記事でご紹介します。

この作業は、WordPress レッスンブック 3.x対応のSTEP4-2を実践したものです。
手順がわかりやすいよう、というか、二度手間にならないようにSTEP4-1を飛ばして、
先に4-2をおこないました。4-1は次の記事で説明します。
 

記事に挿入される画像の修飾

さて、WordPress レッスンブック 3.x対応のテキストもようやくChapter3まできました。
チャプター3では、ワードプレスの機能を使って画像をアップロードし、
それを本文に挿入する際の、見た目を整えていくという作業をします。

ただ、ここでは基本的な機能はワードプレスのものを使い、
ソースをいじるのはスタイルシートのみとなりますので、かなり端折りながら、
チャプター3をいっきに終わらせてしまおうと思います。

まずは、ワードプレスのアップローダで、画像を中央配置して挿入するという作業をした場合、
画像がしっかりと本文の中央に配置されるよう、style.cssファイル(スタイルシート)に、
以下のCSSタグを追加します。

---------------------
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
---------------------

同じ要領で、画像が本文の左や右に挿入するという作業をした場合に、
それぞれ画像が左右に寄せて配置されるよう、style.cssファイル(スタイルシート)に、
以下のCSSタグも追加します。

---------------------
.alignleft { float: left; margin-right: 10px; margin-bottom: 10px; }
.alignright { float: right; margin-left: 10px; margin-bottom: 10px; }

---------------------

また、回り込みの表示が崩れないように、p.postinfoに、
clear: both; というタグを追加します。

---------------------
p.postinfo { color: #888888; text-align: right; margin: 20px 0px 0px; clear: both; }
---------------------

最後に、画像の周りにリンクの線が表示されないように、下記のタグも追加します。

---------------------
div.post img { border: none; }
---------------------

これで、基本的な画像の設定は完了です。
以下はお好みで追加。

画像アップローダーでキャプションを入れたとき、画像とキャプションを見やすいように、
枠で囲んで表示させるためのCSSタグです。

---------------------
.wp-caption { border: solid 1px #AAAAAA; text-align: center; padding-top: 5px; }
---------------------

 

 
こうして画像の表示を整えたサンプル記事が、
画像表示確認のためのサンプル記事」になります。

次は、Chapter4に進みます。
 

記事の個別ページを用意する

トップページには数記事が羅列されて表示されますが、
それらの中の1記事のみを表示させたときの、
個別ページの見た目などを整えていきます。

まずは、記事のタイトルもブラウザのタイトルバーに表示されるように、
index.phpファイル(メインインデックスのテンプレート)で、既に入力されている、
title部分に、下記のソースを追加します。

---------------------
<title><?php bloginfo(‘name’); ?><?php wp_title(); ?></title>
---------------------

次に、個別記事から、その前後の記事にも移動ができるよう、リンクを追加します。
index.phpファイル(メインインデックスのテンプレート)で、ポストブロックのすぐ下に、
下記のソースを追加します。

---------------------
<!– 個別記事の新旧記事へのリンク –>
<?php if(is_single()): ?>
<p class="pagelink">
<span class="oldpage"><?php previous_post_link(); ?></span>
<span class="newpage"><?php next_post_link(); ?></span>
</p>
<?php endif; ?>
<!– 個別記事の新旧記事へのリンク –>

---------------------

 

 
CSSは、前に、新旧記事へのリンクで作成したものをそのまま使いまわしますので、
今回はスタイルシートの追加修正はありません。

完成した画面は↓こちらです。

 

 
これでWordPress レッスンブック 3.x対応STEP2-10まで完了です。