Lightning のアーカイブページでページ送りをループの上にも追加する方法

,

  1. Staff Blog
  2. WordPress
  3. Lightning のアーカイブページでページ送りをループの上にも追加する方法

アクションアクションフックを使って挿入

もしページネーションをループの上部に表示したい場合はアクションフックで挿入します。

子テーマの functions.php などに以下を追加します。

 add_action( 'lightning_loop_before', function(){
	// 投稿タイプが post の時に改変
	if ( 'post'	== get_post_type() ){
		$args = array(
			'mid_size'           => 1,
			'prev_text'          => '«',
			'next_text'          => '»',
			'type'               => 'list',
			'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'lightning' ) . ' </span>',
		);
		// もしループ下部のページ送り部分をフィルターフックで改変している場合は、同様の改変が効くように下記も必要
		$args = apply_filters( 'lightning_pagenation_array', $args );
		// ページネーションを表示
		the_posts_pagination( $args );
	}
 });

子テーマについて不明な場合はこちらの記事 を参照ください。

アクションフックについてはこちらの記事 を参照ください。

CSSで調整

普通に追加しただけだと余白の具合がよろしくないと思うので、外観 > カスタマイズ > 追加 CSSなどに調整するCSSを記載してください。

// 最初のナビゲーションの上下余白調整
.main-section .pagination:first-child{
    margin-top:0;
    margin-bottom:20px;
}

CSSでのカスタマイズについてはこちらの記事 を参照ください。

この記事を書いた人

石川栄和代表取締役
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー(LT)
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。


このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP