WordPressテーマを自作しよう（2）サイト名を表示してリンクを貼る

前回の記事でWordPressテーマを作り始めて、最低限のものを用意しました。

　
今回はサイト名などの基本的な情報を表示してみます。

サイト名を表示してリンクを貼る

ヘッダー（サイトの一番上の部分）にサイト名を表示して、トップページのリンクを貼っておく……というのはよく見ますよね。やってみましょう！

前回mで index.php には get_header と get_footer しか書いていませんでしたが、見た目がわかりやすくなるようにちょっと調整してみました。

<?php get_header(); ?>
ここにいろいろ表示する
<?php get_footer(); ?>

今回いじりたいのはヘッダー部分なので、編集するのはheader.phpです。

任意のテキストにリンクを貼るソースはこのように書きます。

<a href="リンク先のURL"?>リンクを貼るテキスト</a?>

「サイトのURL」と、「サイト名」がわかれば書けますね。
それぞれ次の関数を使用することで参照することができます。

header.phpには次のように書き込みました（ファイルの末尾に追加します）

<a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo( 'name' ); ?></a><br/>
<?php bloginfo( 'description' ); ?><br/>
<hr/>

ついでに入れた bloginfo( ‘description’ ) はサイトのキャッチフレーズです。
hrタグ（ライン）でヘッダーエリアの区切りがわかりやすくなりそうです。

せっかくなのでフッターにも表示物を足してみましょうか（ファイルの冒頭に追加します）

<hr/>
Powered by. <?php echo wp_get_theme();?>

ヘッダーと同様に、エリアの区切りにhrタグを。
wp_get_theme() ではテーマの名前を取得できます。
「今使ってるのこのテーマだよ！」とアピールしたくなったらどうぞ。

表示内容を確認

ここまでやったら見た目を確認してみましょう。
下の画像のようになっているかと思います。

１本目のラインより上がヘッダーエリア、
２本目のラインより下がフッターエリアですね。

• テンプレートタグ/bloginfo
• 関数リファレンス/wp get theme

次の記事でスタイルシートを読み込みます。

まとめ

サイトの情報は次のように取得・表示できます。