Simple Journal – トップページに投稿の一覧を表示する

本日は index.php を編集して、サイトのトップページに投稿の一覧を表示してみます。

どこに何を表示するかは、大体以下のような感じ。

Top Template

 

それでは早速編集していきます。

以下のようになっている index.php に、

 

以下のようなコードを追加し、

 

Webブラウザでサイトのトップページを確認すると、現在登録されている投稿の情報が以下のように表示されます。

Top Template 02

 

ここからさらに、以下のようにHTML部分にコードを組み込んでいくと。

 

意図する見た目に少し近づきました。

Top Template 03

 

投稿に複数のカテゴリーやタグが設定されているときにどう表示されるのかを確認するために、少し投稿を編集してみます。

例えば既存の投稿を以下のように編集すると・・・・

Edit Post

トップページは以下のように表示されます。

Top Template 04

 

こんな風にWebブラウザでの表示結果を確認しながら、見た目のバランスが整うようにテンプレートタグの引数やHTMLのコードを調整していった結果が以下。

Top Template 05

 

今回はタグ名の前に「#」を表示するため、functions.php に以下のようなコードを追加しています。

 

次回以降は、

  • 投稿が多数あった場合のページネーションの表示
  • 投稿が0件だった場合の表示

などを実装していきたいと思います。

Simple Journal – footer.php の作りこみ

本日はテンプレートファイル footer.php を編集していきます。

 

以下のようになっている footer.php に・・・・

 

次のようなテンプレートタグや関数を挿入していきます(OwnerName のリンクの target=”_blank” 部分は削除しています)。

 

ここで登場するテンプレートタグは以下。

bloginfo

指定したパラメータに応じたサイトの情報を表示します。

(パラメータの例)

  • “name” -> サイトのタイトルを表示。

home_url

サイトのホームURLを表示します。

 

そして以下は、wp_header()と似た動きをする関数。

wp_footer

‘wp_footer’ というアクションフックをスタートさせるための関数です。 通常、</body> タグの直前に記述します。

この関数をテンプレートファイルに記述しておくと、
</body>タグが出力される直前のタイミングで実行するよう事前登録された(「フックされた」といいます)関数を実行することができます。

例えば、以下のようなテーマの最上部に表示されるWordPressの管理バーは、この’wp_footer’アクションにフックして出力されますので、自作のテーマを作る際には必ず記述しておいたほうがいいでしょう。

 

さらに以下は、このテーマのために私が独自に定義した関数です。

simplejournal_year_of_publication

サイトの発行年を返します。

独自関数はテーマの functions.php に定義します。

今回は以下のようなコードを functions.php に追記しています。

 

footer.php(および functions.php)に以上の変更を加えた後、サイトを表示すると以下のようになります。

After Edit Footer Template

wp_footerタグを埋め込んだおかげで、WordPressにログインした状態のときには画面の上部に管理バーが表示されるようになりました。

なお、出力されたフッター部分のHTMLのコードは以下。

上記のコードの中で <!– start of wp_footer –> と <!– end of wp_footer –> の間に挟まっている部分が、 ‘wp_footer’アクションフックにより自動的に出力されたコードとなります(こちらも、結構いろいろ勝手に出力されます)。

Simple Journal – カスタムメニューに対応する

テーマ作成の続き。

本日は、サイトのヘッダー部分にあるナビゲーションメニューを、WordPressの管理画面から設定したものに置き換えたいと思います。

Header Navigation

 

01 テーマのカスタムメニュー機能を有効にする

テーマフォルダの中に functions.php という名前のテーマファイルを作成します。

Add Functions Template

そして以下のような記述を追加。

簡単に説明すると、

このテーマをサイトに適用している場合、「Top Menu」という名称のナビゲーションメニューを設定できるようにする。

という処理が行われています。

これにより、WordPressの管理画面からカスタムメニューを作成できるようになり、さらにそのカスタムメニューをテーマに表示できるようになります。

 

02 管理画面からメニューを登録する

それでは早速カスタムメニューを登録しています。

WordPressの管理画面にログインし、「外観 > メニュー」をクリックしてメニューの設定画面を表示します。

Custom Menu

適当なメニュー名を入力して、「メニューを作成」ボタンをクリック。

Register Menu

以上でカスタムメニューの作成が完了です。

作成が完了すると以下のような画面になり、先ほど functions.php に記述したナビゲーションメニュー(メニューの位置)が表示されます。

「Top Menu」のチェックボックスをオンにし、「メニューを保存」ボタンをクリックすると、このカスタムメニューを「Top Menu」というナビゲーションメニューとして表示できるようになります。

Save Menu

 

03 メニューをヘッダーに表示する

header.php を以下のように編集して、サイトのヘッダー部分にナビゲーションメニューを表示できるようにします。

 

今回使ったテンプレートタグは以下。

wp_nav_menu

ナビゲーションメニューを表示するためのテンプレートタグです。

‘theme_location’というパラメーターが指定されている場合、パラメーターの値が示す位置へ割り当てられたメニューを表示します(今回の場合は、「Top Menu」に割り当てた「Global Menu」が表示されます)。

 

サイトを確認すると、以下のようになります。

Global Menu

メニューを増やしたり、メニュー項目のラベルを変更したりしたい場合は、WordPressの管理画面から先ほどのカスタムメニューを編集すればOKです。