sit in a circle and chat happily

WordPress-構築編-5日目

投稿日:2022-03-11
更新日:2022-03-24
Wordpress-Logo

メインループの条件を変更

※基本的にはあまりやらない方がいい

投稿一覧のメインループでは先頭に「先頭固定投稿」が表示されているため最初のページだけ投稿数が増えている。

メインループの条件を変更する際は「functions.php」を使用する。
今回は「home.php」のメインループ条件から「先頭固定投稿」を通常位置で表示に変更する。

<?php
/*********************************
メインループの条件変更
 **********************************/
function main_query_control($query)
{
  if (is_admin() || !$query->is_main_query()) {
    return;
  }
  if ($query->is_home()) {
    $query->set('ignore_sticky_posts', true);
    return;
  }
}
add_action('pre_get_posts', 'main_query_control');
?>

メインクエリ(メインループ)の判定

メインクエリ(メインループ)の判定にはWordPressがあらかじめ用意している暗黙変数「$query」の「is_main_queryメソッド」を利用する。

メインクエリであれば「true」、メインクエリでなければ「false」を返す。

メインクエリ(メインループ)の条件変更

$query->set('条件名', 値)

メインクエリ(メインループ)の条件変更には暗黙変数「$query」の「setメソッド」を利用する。第1引数に「条件名」、第2引数に「値」を指定する。

投稿抜粋文のカスタマイズ

「functions.php」を使ってWordPressの様々な機能を追加・変更できる。

投稿抜粋文の文字数を変更

主に一覧ページで使用する抜粋文の文字数を変更できる。

add_filter('excerpt_mblength', function () {
  return 文字数;
});

「functions.php」に追記・保存する。

<?php
/*********************************
投稿概要文文字数変更
WP Multibyte Patch(プラグイン)を有効にしないと
適切な挙動にならないので注意
 **********************************/
add_filter('excerpt_mblength', function () {
  return 10;
});
?>

投稿一覧を確認すると、抜粋文の文字数が「10文字」に変更されている。

「WP Multibyte Patch」プラグインがインストール・有効化されていないと適切な文字数にならないことがある。

半角スペースや全角スペースも1文字としてカウントされる。抜粋文が長い場合は省略文字[…]が表示される。

投稿抜粋文の省略文字を変更

抜粋文の省略文字を変更できる。

add_filter('excerpt_more', function () {
  return '省略文字';
});

「functions.php」に追記・保存する。

<?php
/*********************************
投稿概要文省略記号変更
 **********************************/
add_filter('excerpt_more', function () {
  return '…';
});
?>

投稿一覧を確認すると、抜粋文の文字数が[…]から…に変更されている。

第9章:ウィジェット

ウィジェット機能

ウィジェット機能を有効にする

初期状態ではウィジェット機能が有効になっていないため、管理画面「外観」に「ウィジェット」が表示されていない。

テーマに機能を追加するには「functions.php」を使用する。
「functions.php」内にウィジェット機能を有効にする命令を記述する。

register_sidebar(
  [
    '設定名' => '値',
    '設定名' => '値',
          :
  ]
)

実践

今回は「フッターエリア」と「広告エリア」の2つのウィジェットエリアを作成する。

<?php
/*********************************
ウィジェットエリア作成
 **********************************/
register_sidebar([
    // 管理画面に表示されるウィジェット名
    'name' => ' フッターエリア',
    // テンプレ内でウィジェット出力時に使用するID名
    'id' => 'widget1',
    // ココ以降はウィジェット出力時のHTMLタグのカスタマイズ
    'before_sidebar' => '<div class="WidgetFooter_Box">',
    'after_sidebar' => '</div>',
    'before_widget' => '<div class="WidgetFooter_item">',
    'after_widget' => '</div>',
    'before_title' => '<div class="WidgetFooter_mainTitle">',
    'after_title' => '</div>',
  ]
);
register_sidebar(
  [
    'name' => ' 広告エリア',
    'id' => 'widget2',
    'before_sidebar' => '<div class="WidgetAd_Box">',
    'after_sidebar' => '</div>',
    'before_widget' => '<div class="WidgetAd_item">',
    'after_widget' => '</div>',
    'before_title' => '<div class="WidgetAd_mainTitle">',
    'after_title' => '</div>',
  ]
);
?>

メニュー機能を有効にした後、管理画面を確認すると「外観」に「ウィジェット」が表示される。

管理画面「外観」>「ウィジェット」をクリックすると「フッターエリア」と「広告エリア」のウィジェットパネルが表示される。

管理画面「プラグイン」の「Classic Widgets」が有効になっている場合は以前のウィジェット画面が表示される。

管理画面「プラグイン」の「Classic Widgets」が無効になっている場合は新しいウィジェット画面が表示される。

新しいウィジェット画面を表示して「フッターエリア」に「見出し」と「段落」を追加する。

ウィジェットを表示する

ウィジェットを表示したい場所でdynamic_sidebar関数を呼び出す。引数にid番号もしくはid名を指定する。

if(is_active_sidebar('ウィジェットのID')) {
  dynamic_sidebar('ウィジェットのID');
}

dynamic_sidebar関数呼び出し前にis_active_sidebar関数でウィジェットが有効になっているか確認する。

実践

  <footer class="Footer">

    <?php if (is_active_sidebar('widget1')) : ?>
      <div class="WidgetFooter">
        <div class="WidgetFooter_inner inner">
          <?php dynamic_sidebar('widget1'); ?>
        </div>
      </div>
    <?php endif; ?>

    <div class="Footer_inner">
   ・
   ・
    </div>
  </footer>

第10章:コメント

コメント機能

コメント欄を表示する

comments_template();

コメント欄を表示したい場所でもcomment_template関数を呼び出す。この関数はループ内でもループ外でも呼び出すことができる。

 </div>
  <div class="Box_footer">
    <div class="Box_inner inner">
      <a class="Box_btnLink btn01" href="<?php echo esc_url(get_post_type_archive_link('post')); ?>">
        ブログ一覧
      </a>
    </div>

    <div class="Comment">
      <div class="Comment_inner inner">
        <?php comments_template(); ?>
      </div>
    </div>

実践

今回は投稿詳細テンプレ「single.php」にコメント欄を表示する。

投稿「Hello world!」を表示するとコメント欄が表示されている。

コメントを許可していない場合

コメントを許可している場合

タイトルタグの出力

/*********************************
  titleタグ出力
  title要素を自動出力するので
  テーマ内のtitleは削除すること
  (header.php)
 **********************************/
add_theme_support('title-tag');
add_filter('document_title_separator', function ($separator) {
  $separator = '|';
  return $separator;
});
カテゴリー