Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. WordPress

WordPressのテーマを自作する(11)

2021年8月3日 WordPress, プログラミング テーマ自作

 前回の続きです。
今回は投稿のヘッダー、本文、フッターについてそれぞれやっていきたいと思います。

投稿のヘッダー

 まずはヘッダー。
つまり、parts/entry-header.php のコードは以下のようになりました。

<?php
get_template_part( 'parts/breadcrumb' );
the_title( '<h1 class="entry-title">', '</h1>' );
get_template_part( 'parts/meta' );

 タイトルとメタ情報については、投稿一覧の時と同様にやるだけでOKですね。
パンくずリストはテンプレート部品 parts/breadcrumb.php に分けました。

 パンくずリストというのはサイトにおける位置をツリー構造で表示するというアレですね。
例えば「ホーム > なんとか > かんとか」という感じ。
どうすれば良いのか調べてみた所、プラグインでやるという手もあるようなのですが、
結局こちらをほぼそのまま使わせてもらうことにしました(^_^;)
とりあえず JSON-LD とかいうやつについては考慮しないでおきます。

投稿の本文

 記事の本文、つまり parts/entry-content.php のコードは以下のようになりました。

<?php
the_content();
//wp_link_pages( // <!--nextpage-->
//	[
//		'before'   => '<nav class="page-links" aria-label="' . esc_attr( 'Page' ) . '">',
//		'after'    => '</nav>',
//		'pagelink' => esc_html( 'Page %' ),
//	]
//);

 記事の本文の出力は the_content() で出来ます。簡単ですね。
wp_link_pages() を使えば、ページ分割された投稿についてのリンクを出力することができます。
ただ、自分のサイトでは <!–nextpage–> によるページ分割はやってないので、
また今後もやることは無さそうなのでコメントアウトしてあります(^_^;)
一応、コードの一例として載せておきました。
ということで、結果的にテンプレート部品化する意味がないくらいに短いコードとなりました(^_^;)

投稿のフッター

 フッターには執筆者の情報を表示します。
parts/entry-footer.php のコードは以下のようになりました。

<div class="author">
	<?php
	printf( '<a href="%s" rel="author">%s</a>',
		 esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
		 esc_html( get_the_author() )
	);
	?>
</div>

 get_the_author_meta( ‘ID’ ) で得た執筆者のIDを get_author_posts_url() に渡すと執筆者のアーカイブページのURLを取得できます。
そして get_the_author() で執筆者名を取得できます。

投稿を表示してみる

 これで、とりあえず投稿を表示させることができるようになりました。
テスト用のコメントを入力して、XAMPP上に構築したローカルなWordPress環境での動作を確認してみました。
↓こんな感じになりました。ページ全体をキャプチャしたので大きいです(^_^;)
投稿

 CSSを書いてないので、見た目がイマイチですが(^_^;)一通りうまく行っているようです。
パンくずリスト、タイトル、メタ情報、本文、執筆者名、コメント一覧&フォーム、前後の記事へのリンク、
以上が順に出力されていることが確認できますね。

 次回に続きます。

関連記事
WordPressのテーマを自作する(23) WordPressのテーマを自作する(22) WordPressのテーマを自作する(21) WordPressのテーマを自作する(20) WordPressのテーマを自作する(19) WordPressのテーマを自作する(18) WordPressのテーマを自作する(17) WordPressのテーマを自作する(16) WordPressのテーマを自作する(15) WordPressのテーマを自作する(14) WordPressのテーマを自作する(13) WordPressのテーマを自作する(12) WordPressのテーマを自作する(10) WordPressのテーマを自作する(9) WordPressのテーマを自作する(8) WordPressのテーマを自作する(7) WordPressのテーマを自作する(6) WordPressのテーマを自作する(5) WordPressのテーマを自作する(4) WordPressのテーマを自作する(3) WordPressのテーマを自作する(2) WordPressのテーマを自作する

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

WordPressのテーマを自作する(10)
WordPressのテーマを自作する(12)

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© Everyday Pieces ::