WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。2018-09-07WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。Wordpressこんにちは、今回はWordPressのアーカイブ機能カスタマイズしていきます。アーカイブ表示とは?アーカイブページは「archive.php」を作れば良いアーカイブページのタイトル個別投稿ページへのリンク記事の抜粋ページングカスタム投稿タイプにも一覧機能をつけたいWP_Queryでカスタム投稿を取り出す!アーカイブ表示とは?そもそも、アーカイブ機能とは何でしょうか?投稿や固定ページとは違ってあまり馴染みのない機能なのではないでしょうか。アーカイブとは記事を一覧表示する機能なので、投稿一覧をいい感じに作ることができるものです。通常、カテゴリーをクリックした際に、そのカテゴリーに属する記事が一覧で表示されると思いますが、そのページがアーカイブページになります。カテゴリーの他にも、タグや、日付(日別・月別・年別)での結果もアーカイブページになります。カスタム投稿タイプで新しく別の投稿タイプを作成した時に、それぞれ別のレイアウトの一覧ページを作りたい!なんて要望もあると思います。通常はリスト表示が多いのですが、これをグリッド形式にしてアルファブログにあるような形に整形することも可能です。アーカイブページは「archive.php」を作れば良いそれではアーカイブページを作っていきます。言っても、アーカイブページの作り方は、固定ページや投稿ページと同じです。WordPressループを利用し、テンプレートタグを使って必要な情報を揃えていけば良いだけです。いつもの基本的な記述で作ってみましょう。?>そうすると、先ほどのように表示されるテンプレートができました。これはアーカイブ特有のタグが埋め込まれていない状態ですので、ここから更にアーカイブ特有のタグを埋め込んでいきます。アーカイブ特有の機能は次の通りです。アーカイブページのタイトル:何の括りで一覧化しているかを示すタイトルをつけます個別投稿ページへのリンク:記事ページへのリンクをタイトルに付ける記事の抜粋:本文を全文出すのではなく、140文字など適当な文字数のみにする。ページング:複数の記事が該当した際にページングさせ、前の一覧や次の一覧へのリンクを付けるアーカイブページのタイトル次のように条件分岐を利用して、タイトルを表示させると良いです。?>カテゴリのアーカイブタイトルを表示する場合はsingle_cat_title()タグのアーカイブタイトルを表示する場合はsingle_tag_title()日付けのアーカイブタイトルを表示する場合はget_the_date(を使用します。個別投稿ページへのリンクh1タグの中身をリンクに書き換えます。記事の抜粋を表示するにはthe_excerpt()を利用します。アーカイブ表示でサムネイルを表示させるにはthe_post_thumbnail();を使えば表示できるのですが、テーマがサムネイルに対応している必要があります。ページング複数の記事が該当した際にページングさせるには、投稿ナビゲーションthe_posts_pagination()を使います。投稿ナビゲーションは配列形式で次のようなパラメータを取ります。mid_size:現在のページの左右にそれぞれ表示するページ番号の数。初期値は1prev_text:前のページへ遷移するためのリンクに使われる文字列。初期値は「前へ」next_text:次のページへ遷移するためのリンクに使われる文字列。初期値は「次へ」screen_reader_text:読み上げ用のテキスト。screen_reader_textは表示されないように半角スペースを入れました。?>カスタム投稿タイプにも一覧機能をつけたいこれまでは、通常の投稿の際のやり方でした。カスタム投稿タイプは別の方法が必要になります。「archive-{slug}.php」のファイルを作れば良いだけかな?と思ってやってみると上手くいきません。通常の投稿タイプの一覧が表示されてしまいます。試しにslugが「blog」の場合の「archive-blog.php」でやってみます。実際に作って確認してみましょう。今までの機能を全部乗せしたバージョンを作成していきます。?>WP_Queryでカスタム投稿を取り出す!上記コードのWordPressループの部分を変更して、カスタム投稿タイプの記事のみ取得するようにカスタマイズします。?>説明:WordPressループの前にWP_Query()を利用して、カスタム投稿タイプ「blog」の投稿を取得してきます。それを$queryに入れて、そこから表示しています。このあたりわからない場合にはこちらの記事を見るといいですよ。hollywis.hatenablog.comそして、URLにサイトタイトルの後に「?post_tyle=blog」というパラメータを渡してやると表示されます。http://localhost:8888/localtest/?post_type=blogなお、この一覧ページはナビメニューを表示させて、設定することもできます。外観設定からメニューを作って、そこにblogの一覧を設定します。合わせてheader.phpの任意の場所にナビメニューを表示する次のコードを挿入します。?></div>上記の表示例の左上にメニュー[blogs一覧]が表示されているかと思います。これでカスタム投稿タイプ別に自由に一覧ページを作成することができますね!次回はCSSフレームワークを利用して、この一覧ページのデザインを綺麗に整えていきたいと思います。16:00WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。Tumblr広告を非表示にする関連記事2018-10-04高速で動くWordPress環境を探して辿り着いた「KUSANAGI」に変えたら超速いし・安いし・デ...こんにちは、のすけです。WordPress構築用のサーバーは各社から...2018-09-27WordPressのテーマにサムネイルをサポートさせるこんにちは、のすけです。自分でWordPressテーマを作ると必要な...2018-09-17カスタムフィールドを使いこなしてWordPressを「単なるブログ」から「使えるシステム」に進化させ...こんにちは、のすけです。「WordPressって言うてもブログでしょ...2018-08-30WordPressループってなんぞや?コンテンツ表示に欠かせないお話こんにちは、のすけです。Wordpressテーマを作るのすけです。(2)リンクホックー!検索はてなブログをはじめよう!hollywisさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。