電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

【WordPressテーマの自作④】「PHPでパンくずリストと前後記事一覧リンク作成」

calendar

reload

【WordPressテーマの自作④】「PHPでパンくずリストと前後記事一覧リンク作成」

header下部にあるパンくずリストと、footer上部にある前後記事一覧リンクをPHPで作成します。

手順はいつもと同じで、元のHTML記述をPHPに入れ替え、CSSでスタイリングする流れになります。

スポンサーリンク

パンくずリスト

index.php、single.php、page.php

index.php、single.php、page.phpのHTMLで作成されているパンくずリスト記述をPHPに変更します。

functions.php

続いて、functions.phpにパンくずリストの追加記述をいれます。

PHP記述後、WordPressでテーマを開き、各カテゴリでパンくずリストが反映されているか確認します。

スタイルが崩れていれば修正します。

パンくずリスト

前後記事一覧リンク

footerの上部にある前後記事一覧リンクを作成します。

トップ画面の表示記事数はWordPress設定画面で指定できますので、記事数に応じて下部に1、2、3、、、と番号のリンクが出るようにします。

投稿ページについては前後のリンク(タイトル名)としますので、<div id=prenext>要素内の要素を前後リンクのPHPと入れ替えます。

固定ページについては必要がないため、<div id=prenext>要素を消去するだけにしておきます。

index.php

index.phpは、送りページ箇所<div id=prenext>要素を消去し、下記の記事一覧リンクphpコードに置き換えます。

single.php

single.phpは送りページ箇所<div id=prenext>要素の中身を下記の前後リンクPHPに変更します。

CSS

CSSは下記の追加でスタイルします。

テーマからトップページのリンク、投稿記事のリンクを確認します。

 

記事一覧リンク
記事一覧リンク

 

前後リンク
前後リンク

 

次回はsideber.phpを作成し、テーマの完成にしたいと思います。