気になったことはなんでも調べてメモするブログ
  1. WordPress
  2. 27 view

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

Last updated: 2020/03/21

前回の記事で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’ );
「echo esc_url(home_url(‘/’));」は、home_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() ではテーマの名前を取得できます。
「今使ってるのこのテーマだよ!」とアピールしたくなったらどうぞ。

表示内容を確認

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


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

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

まとめ

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

サイトのURL echo esc_url(home_url(‘/’));
サイト名 bloginfo( ‘name’ );
キャッチフレーズ bloginfo( ‘description’ );
テーマ名 echo wp_get_theme();




WordPressの最近記事

  1. 【TCD-ZERO】記事のタイトルをh1見出しにする

  2. 【TCD-ZERO】記事抜粋した末尾に「…」が表示されないようにする

  3. 【TCD-ZERO】記事一覧で (さらに&hellip;) と表示されてしまう問題を解決す…

  4. All In One WP Securityの初期設定で気を付けるポイント

  5. WordPressテーマを自作しよう(8)トップページと記事ページで別のものを表示する

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP