WordPressでサイトのタイトルは関数を使用して取得し表示させることができます。
WordPressでサイトタイトルをHTMLで表示するよりも、WordPressなりの表示させる使い方のほうが、あとでサイトタイトルを変更した場合なんかに書き換えする必要がないので、サイトのタイトルを取得して表示させる関数の使い方を覚えておきたいです。
WordPressでサイトタイトルを表示する
WordPressのサイトのタイトルを取得して表示させる場合は、HTMLでタグを書いてphpでWordPressの関数をタグで囲んだ中でechoで出力します。
サイトタイトルを取得してサイトに表示させるWordPressの関数は4つ使用しました。
- bloginfo( ‘name’ )と( ‘description’ )
- home_url
- esc_url
- get_template_directory_url
上記の関数を使いタイトルの文字列を取得したり、サイトのURLを取得、サイトのディスクリプション、エスケープ処理をした使い方をします。
それぞれの関数を使ってWordPressのサイトタイトルを取得して表示する使い方を詳細にしていきます。
bloginfo( ‘name’ )でサイトのタイトルを取得
<?php bloginfo( $show ); ?>
WordPressの関数「bloginfo」はサイトの情報を表示させる関数です。
パラメータ初期値は( ‘name’ )です。
<?php bloginfo( ‘name’ ); ?>
bloginfoのパラメータは何種類かありますが、WordPressのサイトのタイトルを取得するときのパラメータは( ’name’ )です。
<h1><?php bloginfo( ‘name’ ); ?></h1>
h1タグでbloginfo( ‘name’ )を囲んでサイトタイトルを出力して表示する使い方ができます。
このときの出力するタイトルは、WordPressの一般設定にある「サイトのタイトル」が使われます。
home_urlでホームのURLを取得
次にWordPressの関数「home_url」を使ってサイトのホームのURLを取得する使い方です。
<?php echo home_url(); ?>でサイトのURLを取得できます。
home_urlはURLを文字列で取得します。echoで出力してるだけなので、まだクリックしてもリンク先に飛ばずに文字列が表示されるだけです。
そして、このhome_urlで取得したURLは管理画面の「一般設定」で設定された「サイトアドレス(URL)」が表示されます。
取得したサイトタイトルをリンクする
次にWordPressでサイトタイトルをリンクしてクリックできるようにするための使い方です。
WordPressの関数「<?php echo home_url(); ?>」をHTMLのaタグに付けた使い方をします。
初めて使う場合はHTMLのaタグでリンクさせてからだとわかりやすくなるかと思います。
<a href=”リンク先url”>表示される文字</a>
HTMLでリンクを書くときは上記のようにaタグで囲んで表示される文字が表示されます。
これをWordPressの関数「home_url」で書く場合は下記のコードです。
<a href=”<?php echo home_url(); ?>”>表示される文字</a>
a要素のhref属性の属性値を指定する部分でhome_urlをechoで出力するようにします。
書き方は違いますが表示も同じでリンクもできます。
home_url( ‘/’ )とすると、URLの最後にスラッシュをつけることができます。
そしてWordPressの関数でサイトのタイトルを表示させるための使い方はもう少しだけコードを付け足していきます。
esc_url()でエスケープ処理する
WordPress関数でサイトのURLをエスケープ処理する使い方です。
関数「esc_urlを使ってhome_url」に対して無害化しておきます。さっきホームのURLを取得してリンクまでさせたコードが以下でした。
<a href=”<?php echo home_url(); ?>”>表示される文字</a>
このコードにエスケープ処理するコードを加えてあげます。
<a href=”<?php echo esc_url(home_url( ‘/’ )); ?>”>表示される文字</a>
href属性をPHPで生成するときは必要なようです。
で、最終的に表示される文字の部分もWordPressの関数でサイトのタイトルを取得して完成したコードになるので次に書くサンプルコードを確認してみてください。
サイトタイトルを表示するサンプルコード
最終的なコードはhome_urlとbloginfo( ‘name’ )そしてesc_urlを使ってh1タグでマークアップして完成です。
<h1>
<a href="<?php echo esc_url(home_url( '/' )); ?>"><?php bloginfo( 'name' ); ?></a>
</h1>
2行目でエスケープ処理してホームのURLを出力して表示、3行目でサイトのタイトルを文字列で出力してます。
WordPressの関数の使い方が少しづつ理解できるようになると、サイトのタイトルを書くコードが短くて済むし、タイトルを書き直す時が楽になります。
WordPressでサイトのタイトルを画像にしてる場合は次からの説明でWordPress関数の使い方を説明してます。
WordPressのサイトタイトルを画像で取得する
WordPress関数でサイトタイトルを画像にして取得する使い方の場合です。
HTMLの<img>タグを使用してsrc属性の属性値にPHPでWordPress関数の「get_template_directory_url」をechoで出力します。
<h1>
<a href=”<?php echo esc_url(home_url()); ?>”>
<?php bloginfo( ‘name’ ); ?>
</a>
</h1>
サイトのタイトルを画像で表示する関数の書き方は、文字列で出力するときと同じコードから上記コードの<?php bloginfo( ‘name’ ); ?>の部分を画像を取得できるように変更していきます。
変更するために付け足すのはHTMLタグです。
<img src=”example.jpg” alt=”example”>
HTMLで画像を表示する場合は上記の書き方ですが「example」の部分のsrcとaltの属性値にWordPress関数を書いていきます。
get_template_directory_urlで画像を表示
まずは画像の取得をする関数の使い方からですが、使用するWordPress関数は以下です。
get_template_directory_uri()
末尾にスラッシュ(/)は含まれません。
<img src=”<?php echo get_template_directory_uri(); ?>/images/logo.png”>
img要素の中でget_template_directory_uri()が画像を取得します。
取得する画像は使用する画像のパスを指定します。
get_template_directory_uri()は親テーマのURIを返します。
それなので子テーマのディレクトリを取得するときはget_stylesheet_directory_uri()を使用するようにします。
サイトのタイトルに画像を使用しました。画像なのでalt属性をつけてあげようと思うのでalt属性にもWordPress関数をつけてしまいましょう。
サイトタイトルの画像にalt属性を取得
サイトのタイトルの画像のalt属性の属性値には、alt=”画像の情報”の中にさっき使用した「bloginfo( “name” )」でサイトのタイトルを表示させます。
alt=”<?php bloginfo( ‘name’ )
そしてサイトのタイトルを画像で取得した画像にaltにも書いた関数もつけた最終的なコードが以下です。
<img src="<?php echo get_template_directory_uri(); ?>/images/example.png" alt="<?php bloginfo( 'name' ); ?>"/>
サイトのタイトルを画像にしたサンプルコード
文字列で取得するサイトのタイトルのコードと画像にしたサイトタイトルのコードの違いは3行目からのimg要素だけですがサンプルコードが下記です。
<h1>
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>example.jpg" alt="<?php bloginfo( 'name' ); ?>"/>
</a>
</h1>
2行目のhome_urlでホームのURLを出力して、3行目で画像を表示してalt属性をつけてます。
WordPressのサイトのキャッチフレーズを取得
最後にWordPressのキャッチフレーズを取得するときの関数の使い方です。
キャッチフレーズはサブタイトルのようなものですかね。
bloginfoを使用してパラメータを( ‘description’ )にします。
<?php bloginfo( ‘description’ ); ?>
出力したキャッチフレーズは管理画面で設定しているキャッチフレーズが表示されます。