演習・プラグイン

アクションフック

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を読み込むことが可能です。

results matching ""

    No results matching ""