header下部にあるパンくずリストと、footer上部にある前後記事一覧リンクをPHPで作成します。
手順はいつもと同じで、元のHTML記述をPHPに入れ替え、CSSでスタイリングする流れになります。
目次
パンくずリスト
index.php、single.php、page.php
index.php、single.php、page.phpのHTMLで作成されているパンくずリスト記述をPHPに変更します。
|
1 2 3 |
<!-- パンくず --> <div class="breadcrumb"> <?php mytheme_breadcrumb(); ?> </div> |
functions.php
続いて、functions.phpにパンくずリストの追加記述をいれます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
// パンくずリスト function mytheme_breadcrumb() { //HOME>と表示 $sep = ''; echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>'; echo $sep; //投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示 $cats = ''; $cat_id = ''; if ( is_single() ) { $cats = get_the_category(); if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id; } else if ( is_category() ) { $cats = get_queried_object(); $cat_id = $cats->parent; } $cat_list = array(); while ($cat_id != 0){ $cat = get_category( $cat_id ); $cat_link = get_category_link( $cat_id ); array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' ); $cat_id = $cat->parent; } foreach($cat_list as $value){ echo '<li>'.$value.'</li>'; echo $sep; } //現在のページ名を表示 if ( is_singular() ) { if ( is_attachment() ) { previous_post_link( '<li>%link</li>' ); echo $sep; } the_title( '<li>','</li>' ); } else if( is_archive() ) the_archive_title( '<li>', '</li>' ); else if( is_search() ) echo '<li>検索 : '.get_search_query().'</li>'; else if( is_404() ) echo '<li>ページが見つかりません</li>'; } |
PHP記述後、WordPressでテーマを開き、各カテゴリでパンくずリストが反映されているか確認します。
スタイルが崩れていれば修正します。
前後記事一覧リンク
footerの上部にある前後記事一覧リンクを作成します。
トップ画面の表示記事数はWordPress設定画面で指定できますので、記事数に応じて下部に１、２、３、、、と番号のリンクが出るようにします。
投稿ページについては前後のリンク（タイトル名）としますので、<div id=prenext>要素内の要素を前後リンクのPHPと入れ替えます。
固定ページについては必要がないため、<div id=prenext>要素を消去するだけにしておきます。
index.php
index.phpは、送りページ箇所<div id=prenext>要素を消去し、下記の記事一覧リンクphpコードに置き換えます。
|
1 2 3 4 |
<?php the_posts_pagination( [ 'prev_text' => '', 'next_text' => '', ] ); ?> |
single.php
single.phpは送りページ箇所<div id=prenext>要素の中身を下記の前後リンクPHPに変更します。
|
1 2 3 4 |
<div id="prenext"> <div class="pre"><?php previous_post_link(); ?></div> <div class="next"><?php next_post_link(); ?></div> </div> |
CSS
CSSは下記の追加でスタイルします。
|
1 2 3 4 5 6 7 8 9 10 11 |
.screen-reader-text { display: none; } .nav-links { padding: 50px 0 ; text-align: center; } .nav-links a:hover{ background: gray; } |
テーマからトップページのリンク、投稿記事のリンクを確認します。
次回はsideber.phpを作成し、テーマの完成にしたいと思います。
