演習・プラグイン
アクションフック
1 アクションフックを体験する
pre_get_postsアクションフックを利用して、カテゴリーページの表示件数を5件に変更して見ましょう。
function change_posts_per_page($query) {
//管理画面及びメインクエリに影響させない。
if ( is_admin() || ! $query->is_main_query() ){
return;
}
// カテゴリーページならば
if ( $query->is_category() ) {
//ページあたりの表示件数を5件にする。
$query->set( 'posts_per_page', '5' );
return;
}
}
// pre_get_postsアクションフックに上記の関数を追加
add_action( 'pre_get_posts', 'change_posts_per_page' );
前回の演習で作成したphpのカテゴリーページを確認して見ましょう。 ダッシュボードからパーマリンク設定を「投稿名」に変更した上で、 [ブログurl]/category/php で確認できます。 posts_per_pageの数字を変えてチェックして見ましょう。
パーマリンクについて
パーマリンク設定は
2 アクションフックの活用
wp_headアクションフックを利用して、head要素に以下のmeta要素を追加してみましょう。
<meta name="description" content="descriptionのテスト">
index.phpのheadタグの末尾に
中略
<?php wp_head(); ?>
</head>
上記のような形でwp_head()を追加しておきましょう。
フィルターフック
1 フィルターフックを体験する
body_classフィルターフックを利用して、bodyのclass属性にtestクラスを追加して見ましょう。
functions.php
add_filter('body_class', function($classes){
// testクラスを追加
$classes[] = 'test';
// フィルターフックでは加工後の値を返すのを忘れずに。
return $classes;
});
index.php
<body <?php body_class(); ?> >
以上の記述を行なった上で、body要素のclass属性にtestクラスが追加されていることを確認して見ましょう。
2 フィルターフックの活用(難)
the_contentフィルターフックのwpautopを外した上で、ブログ本文に含まれる「PHP」の文字について赤色で表示させて見ましょう。
ヒント1. 正規表現を活用して見ましょう。preg_replaceについて調べて見てください。
ヒント2.
.php {
color: red;
}
上記のようなCSSをstyle.cssに追加して見ましょう。
ヒント3.
function zero_scripts() {
wp_enqueue_style( 'zero-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'zero_scripts' );
上記のように、wp_enqueue_scriptsアクションフックを利用して、 style.cssを読み込むことが可能です。