前回の記事でWordPressテーマを作り始めて、最低限のものを用意しました。
今回はサイト名などの基本的な情報を表示してみます。
2020/03/21 | 「home_url();」と記載していた箇所を「echo esc_url(home_url(‘/’));」に修正 |
---|
サイト名を表示してリンクを貼る
ヘッダー(サイトの一番上の部分)にサイト名を表示して、トップページのリンクを貼っておく……というのはよく見ますよね。やってみましょう!
前回mで index.php には get_header と get_footer しか書いていませんでしたが、見た目がわかりやすくなるようにちょっと調整してみました。
<?php get_header(); ?>
ここにいろいろ表示する
<?php get_footer(); ?>
今回いじりたいのはヘッダー部分なので、編集するのはheader.phpです。
任意のテキストにリンクを貼るソースはこのように書きます。
<a href="リンク先のURL"?>リンクを貼るテキスト</a?>
「サイトのURL」と、「サイト名」がわかれば書けますね。
それぞれ次の関数を使用することで参照することができます。
サイトのURL | echo esc_url(home_url(‘/’)); |
---|---|
サイト名 | bloginfo( ‘name’ ); |
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() ではテーマの名前を取得できます。
「今使ってるのこのテーマだよ!」とアピールしたくなったらどうぞ。
表示内容を確認
ここまでやったら見た目を確認してみましょう。
下の画像のようになっているかと思います。
1本目のラインより上がヘッダーエリア、
2本目のラインより下がフッターエリアですね。
次の記事でスタイルシートを読み込みます。
まとめ
サイトの情報は次のように取得・表示できます。
サイトのURL | echo esc_url(home_url(‘/’)); |
---|---|
サイト名 | bloginfo( ‘name’ ); |
キャッチフレーズ | bloginfo( ‘description’ ); |
テーマ名 | echo wp_get_theme(); |
この記事へのコメントはありません。