ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

Luxeritas(ルクセリタス)記事一覧1ページ目のみウィジェット表示する方法

Luxeritasではウィジェットをヘッダー下や記事一覧ページ上などに表示することができます。

でもこれって『記事一覧の2ページ目以降の表示は邪魔じゃない?』ということで1ページ目のみに表示させる方法を紹介します。

この記事でわかること

次のウィジェットエリアを記事一覧の1ページ目のみに表示させます。

  • ヘッダー下ウィジェットエリア
  • 記事一覧上ウィジェットエリア
注意事項

本記事での検証は、Luxeritasバージョン3.20.3で実施しています。別バージョンでは正しく動作しない可能性があります。

したがって事故防止として事前にバックアップを取ってから実施する、または、ローカル環境で試してから本サイトに反映させるなど、自己責任で実施ください。

私もローカル環境で動作テストをしたうえで、本サイトに適用する前にはバックアップを取ってから実行しています。

記事一覧2ページ以降でウィジェット非表示とするメリット

Luxeritasの記事一覧ページには、次のウィジェットエリア(赤枠部)があります。
(サイドバーのウィジェットエリアは省略しています)

Luxeritasの記事一覧ページウィジェットエリア

デフォルトではどのウィジェットエリアも、記事一覧ページの2ページ目以降も表示されます。

もちろんこのままでもよいのですが、ページ上部となるヘッダー下ウィジェットエリアや記事一覧上ウィジェットには、2ページ目以降には不要なコンテンツを配置することがあるでしょう。

例えば、Luxeritasでカテゴリー記事一覧を表示する方法で紹介したように、記事一覧上にカテゴリー別記事を表示する場合などです。

カテゴリー一覧の配置後イメージ

このカテゴリー別記事は2ページ目以降を閲覧したいユーザーにとってはむしろ邪魔ですよね。したがって2ページ目以降は非表示にしたいと思います。

条件分岐タグで2ページ目以降はウィジェット非表示とする

非表示にするために、記事一覧2ページ目以降を判別する次の条件分岐タグ を使います。
(ワードプレスのCodex日本語版参照)

is_paged( )

この関数は2ページ目以降であればtrue、1ページ目であればfalseを返します。したがってif文を使って、

if( is_paged( ) === false ){(ウィジェットを表示)};

とすれば2ページ目以降は(ウィジェットを表示)が実行されないというわけですね。

手順概要

子テーマに必要なテンプレートファイルをコピーしてから編集していきます。

基本手順としては次の2ステップのみです。

  1. 必要なテンプレートファイルを親テーマから子テーマにコピーする
  2. 子テーマのテンプレートファイルを編集して保存
    (is_paged( )タグを挿入します)

このように手順としては単純なのですが、必要なテンプレートファイルがどれで、ウィジェット表示がどこに記述されているかを探すのが面倒なところです。

Luxeritasのテーマディレクトリ

テンプレートファイルはテーマディレクトリに格納されています。Luxeriatsのテーマディレクトリは以下の通りです。

  • 親テーマ・・・(ワードプレスをインストールしたルート)>wp-content>themes>luxeritas
  • 子テーマ・・・(ワードプレスをインストールしたルート)>wp-content>themes>luxech
Luxeritasのテーマディレクトリ
Local-by flywheel環境にインストールした事例

サーバー内の親テーマや子テーマのディレクトリにアクセスするにはFileZillaなどのFTPソフトが必要です。準備しておきましょう。

詳細手順

ヘッダー下ウィジェットエリアの場合

①header.phpを親テーマから子テーマにコピーする

親テーマのディレクトリLuxeritasの中のheader.phpをコピーして子テーマディレクトリluxechにペーストします。

header.phpのコピー

②子テーマのテンプレートファイルを編集して保存

1.子テーマのheader.phpにアクセス

ダッシュボードメニューの外観>テーマエディターと進めて子テーマのheader.phpを開けます

①テーマエディターの右サイドメニューの中からheader.phpをクリック
②子テーマのheader.phpが表示されることを確認

子テーマのheader.phpを開く

2.ヘッダー下ウィジェットエリアの記述箇所を確認

一番下までスクロールしていくと、350行目あたりにヘッダー下ウィジェットエリアの記述箇所が見つかります。

ヘッダー下ウィジェットエリアの記述

シンタックスハイライターでコードを明示しておきます。

if( function_exists('dynamic_sidebar') === true ) {
	if( isset( $luxe['amp'] ) && is_active_sidebar('head-under-amp') === true ) {
		$amp_widget = thk_amp_dynamic_sidebar( 'head-under-amp' );
		if( !empty( $amp_widget ) ) echo $amp_widget;
	}
	elseif( !isset( $luxe['amp'] ) && is_active_sidebar('head-under') === true ) {
		dynamic_sidebar( 'head-under' );
	}
}

3.ヘッダー下ウィジェットエリアのコードを編集して保存

次のようにコードを編集します。350行目にコメント文も追記しましたが、これは任意です。

ヘッダー下ウィジェットエリアの記述を編集

if文の中に&& is_paged( ) === false を記述することで、2ページ目以降にはこのウィジェットエリアが表示されなくなります。コードは全て半角で記述してください。

//ヘッダー下ウィジェット表示(1ページ目のみに表示する)	
if( function_exists('dynamic_sidebar') === true && is_paged() === false ) {
	if( isset( $luxe['amp'] ) && is_active_sidebar('head-under-amp') === true ) {
		$amp_widget = thk_amp_dynamic_sidebar( 'head-under-amp' );
		if( !empty( $amp_widget ) ) echo $amp_widget;
	}
	elseif( !isset( $luxe['amp'] ) && is_active_sidebar('head-under') === true ) {
		dynamic_sidebar( 'head-under' );
	}
}

最後に画面下の”ファイルの更新”をクリックして保存しましょう。

記事一覧上ウィジェットエリアの場合

①loop.phpまたはloop-grid.phpを親テーマから子テーマにコピーする

Luxeritasの記事一覧表を表示するループ文(メインループ)は、loop.phpとloop-grid.phpの2通りあります。

  • loop.php ・・・・・通常スタイルの記事一覧表を表示する
  • loop-grid.php・・・タイル型またはカード型の記事一覧表を表示する

したがって、自分が使っている一覧表の外観によりどちらかを選んで子テーマにコピーしてください。
(面倒でなければ両方コピーするのがよいでしょう)

loop関連ファイルをコピー

②子テーマのテンプレートファイルを編集して保存

1.子テーマのloop.phpまたはloop-grid.phpにアクセス

ダッシュボードメニュー 外観>テーマエディター と進めて、子テーマのloop.phpまたはloop-grid.phpを開けます。

(loop.phpの場合)
①画面右メニューのloop.phpをクリック
②子テーマのloop.phpであることを確認

子テーマのloop.phpを開く

(loop-grid.phpの場合)
①画面右メニューのloop-grid.phpをクリック
②子テーマのloop-grid.phpであることを確認

子テーマのloop-grid.phpを開く

2.記事一覧上ウィジェットエリアの記述箇所を確認

loop.php、loop-grid.phpそれぞれの記事一覧上ウィジェットエリアの記述箇所は次の通りです。

いずれもコメント文で”記事一覧上部ウィジェット”と記述があるのでわかりやすいです。

(loop.phpの記述箇所)

loop.phpの記事一覧上ウィジェットエリアの記述

(loop-grid.phpの記述箇所)

loop-grid.phpの記事一覧上ウィジェットエリアの記述

記述しているコードの内容は、loop.php、loop-grid.phpともに同じです。

// 記事一覧上部ウィジェット
if( is_active_sidebar('posts-list-upper') === true ) {
?>
<div class="posts-list-upper-widget toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix">
<?php
	dynamic_sidebar( 'posts-list-upper' );
?>
</div><!--/.posts-list-upper-widget-->
<?php
}

3.記事一覧上ウィジェットエリアのコードを編集して保存

loop.php、loop-grid.phpともにコードの編集内容は同じなので、loop-grid.phpは省略します。

記事一覧上ウィジェットエリアの記述を編集

ヘッダー下ウィジェットエリアの場合と同じく、if文の中に&& is_paged( ) === false を記述することで、2ページ目以降にはこのウィジェットエリアが表示されなくなります。コードは全て半角で記述してください。

// 記事一覧上部ウィジェット(1ページ目のみに表示)
if( is_active_sidebar('posts-list-upper') === true && is_paged() === false ) {
?>
<div class="posts-list-upper-widget toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix">
<?php
	dynamic_sidebar( 'posts-list-upper' );
?>
</div><!--/.posts-list-upper-widget-->
<?php
}

最後に画面下の”ファイルの更新”をクリックして保存しましょう。

以上で終了です。2ページ目以降にはウィジェットが表示されなくなります。

まとめ

今回はヘッダー下と記事一覧上の2つのウィジェットを2ページ目以降非表示としましたが、同じ考え方で次のコードを記述すれば他のウィジェットエリアにも適用することができます。

if( is_paged( ) === false ){(ウィジェットを表示)};

なおテンプレートファイルを編集する方法以外に、functions.phpにunregister_sidebar( )関数を記述してウィジェットを登録取り消す方法もあります。確かにウィジェット自体は非表示となるのですが、ウィジェットエリアがアクティブと判断されてウィジェットのコンテナである<div>タグが表示されてしまうため採用を断念しました。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる