G&W Design Life

WordPress勉強 vol 2

テンプレートタグについて

WPはPHPで作られており、WPの表示に関わる独自関数の事を『テンプレートタグ』といいます。
この『テンプレートタグ』とセットで『パラメーター』があり、
パラメータを変更する事で表示させるものを変えたりできます。

bodyに動的にclassを出力する

WPはTOPや投稿ページ、固定ページなど様々なページを動的に出力します。
しかし、ページによってデザインを変えたい時があります。
このような時に『body_class』テンプレートタグを使うと便利です。

<body <?php body_class(); ?>>

アクセスしているユーザーの状況によっても表示する文字列が異なります。
例えば、ユーザーがログインしているかどうかでも変わってくるのです。
このように『body_class』を使うと柔軟なデザインの幅を広げる事が可能になります。

テンプレートを分割する

他のページでも共通で使うヘッダーヤフッターなどは『テンプレートパーツ』として別のファイルに分離させて管理しやすくします。


・header

<?php get_header($name); ?>

・footer

<?php get_footer($name); ?>

・sidebar

<?php get_sidebar($name); ?>

分割したテンプレートを作りこむ

■headerテンプレートとfooterテンプレートに追記する
[ 必須 ]
下記記述がないと、プラグインなどWPの機能が使えなくなることがある
・hed内にwp_head関数を記述(head閉じタグ前)

<?php wp_head(); ?>

・foot内にwp_footer関数を記述(body閉じタグ前)

<?php wp_footer(); ?>

■jQeryを読み込む
WPでは様々なプラグインを使用します。ところがすでにテーマ内で読み込んでいた場合重複してしまいます。
このような問題を解決するに関数が用意されています

<?php
wp_enqueue_script('jquery');
wp_head();
?>

■独自JSを読み込む
wp_enqueue_script関数を利用して独自関数もよ見込むことができます。

<?php
wp_enqueue_script('jquery');
wp_enqueue_script('任意の文字列',get_template_directory_uri().'/js/common.js');
wp_head();
?>

条件分岐でTOPページだけ表示を変える

phpの条件分岐でTOPページか調べてTOPの時だけ表示する

<?php if(is_home()): ?>
    <div>ほげほげほげほげ</div>
<?php endif;?>

is_home以外の条件分岐タグ

WPには様々な条件分岐タグが用意されています。以下はほんの一部です。

titleタグを適切な表示となるように変更する

index.phpのtitleタグは以下のように設定しました。

<title><?php bloginfo('name'); ?></title>

このままだとheaderを共有化しているのて他のページでも全て同じtitleが表示されてしまいます。このままではSEO的に問題なので、各ページで適切なタイトル名が表示されるように条件分岐で設定をします。

<title><?php wp_title('-', true, 'right'); ?></title>

上記は『表示されているページのタイトル - 』と表示されます。

■条件分岐で下記のようなスタイルにするには
TOPページ → サイト名のみ
下層ページ → 表示しているページ名 – サイト名

<title><?php if(!is_home()){wp_title('- ', true, 'right');}bloginfo('name'); ?></title>

titleに改行が入らないようにするには1行で記述する事.
確認は固定ページのプレビューから行います。

Profile

エディトリアルデザイン・グラフィックデザインを経て数年前Webデザイナーに転身した30代デザイナーです。現代アートや地域とデザイン、ヒト・モノ・コト全般に興味があり。
イラストを描くのが好き。プログラミングはまだまだわからない事も多く初心者なんでメモ&学習としてこのブログを開設しました。どうぞよろしくお願い致します!

Recent Entries

Category