書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】カスタム投稿を追加し、トップページに一覧表示させる

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

本日のカスタマイズ記事は、カスタム投稿タイプを追加しトップページに一覧表示させる方法です。

カスタム投稿追加も一覧表示もそんなに難しくないので、実現したい方はぜひ導入してみて下さい!

プラグインは使いません。あくまでもソース修正のみで実装します。

かきてぃー
だって、プラグイン導入し過ぎると管理やアプデが…

では、早速開始です!

まずはカスタム投稿の追加

記事を追加する前に、とにかくカスタム投稿ページを作成しましょ。

カスタム投稿の追加は「functions.php」をカスタマイズします。

例:ツール関連(スラッグ:tools)を追加したい。

変更が必要なのはラインが引いている箇所。

スラッグや日本語名なんかを変更して下さい。

※スラッグは一覧表示時のパーマリンクにもなりますので、関連する文字列を設定した方がいいです。

追加出来ると、管理画面のサイドバーに「ツール関連」のような追加したカスタム投稿名が表示されます。

こちらで記事を追加すると、追加したカスタム投稿に紐づきます。

サメくん
じゃあ、same-saikoってスラッグ付けたら「サメ最高」の投稿が使えるようになるの?
イルカさん
その通り!(そんなスラッグ絶対使わないけどね)

一覧表示方法

カスタム投稿一覧を取得する為の専用テンプレートを作成しましょう。

今回はスラッグ「tools」を作成しましたので、テンプレート名は「tools-list.php」にします。

「tools-list.php」にはカスタム投稿を取得するロジックを書きます。

3行目は必ず、追加したカスタム投稿のスラッグ名を設定して下さい。

カスタム投稿取得用のテンプレートが作成出来たら、後は追加したい場所にテンプレートを呼び出すだけで、一覧が取得出来ます。

ヘッダー下部に追加してみた

私の場合は、ヘッダー下に追加してみました。

追加前

追加後

追加方法は、ソースコードを参照し追加した場所にテンプレート呼び出しロジックを追記します。

「header.php」の一番下なり、「index.php」の記事取得前なり、自由な場所に追加してみて下さい。n

アイキャッチ画像を設定していない為、タイトルとリンクのみ取得されております。

後はcssでデザインを調整すれば完成です!

ウィジェットで追加できるようにしてみた

追加する場所が決まっていないけど、とりあえず導入して後でウィジェットで追加したい!

という方の為にウィジェットでテンプレートを取得し、自由な位置へ表示させる方法を載せておきます。

方法は、新規ウィジェットを作成し、先ほど追加したテンプレート「tools-list.php」を呼び出すロジックにします。

「AFFINGER4」には「09_STINGERカスタム投稿一覧」のウィジェットが既にありますが、ここではあえて、方法を載せておきますので「AFFINGER4」を利用していない方でも導入できるかと。

「functions.php」に以下のロジックを追加します。

各ポイントを説明します。

  • 1行目のclass名「Custom_Originalpost_Widget」は任意の名前でOKだが、29行目の設定と一致している必要がある
  • 6行目はウィジェットのタイトル、7行目がウィジェットの説明になる
  • 5行目のIDはベースとなるので、15行目・28行目と一致している必要がある
  • 31行目のinitパラメータ「register_custompostentry__originalwidget」は28行目のファンクション名を設定すること
サメくん
難しい単語が多くて訳わからん!!!

そんな方は、ロジックを変更せず、そのまま利用して下さい。

6行目のタイトルと説明ぐらいは変更した方がいいですが…。

「functions.php」を更新すると、ウィジェットに無事追加されていますので、任意の場所に設定します。

今回はサイドバーへ設定。

無事にカスタム投稿の記事が取得出来ていれば、OKです!

スポンサーリンク

デザイン(style.css)の調整

こんな感じに横並びでデザイン調整を行います。

52行目のカラーコードを変更すれば、文字列の背景色を変更できますので、好みに合わせて変更下さい。

かきてぃー
こんなに凝ったデザインじゃなくて、シンプルなリストタイプのデザインに変更してニュース記事一覧として利用してもいいかもしれません。
かきてぃー
それでは、本日もお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.