3,349 view

「Advanced Custom Fields」でピックアップ記事の表示制御カスタマイズ

「Advanced Custom Fields」でピックアップ記事の表示制御カスタマイズ 公開日:2021/05/24
この記事のURLとタイトルをコピーする

ホームページ運用が始まると、「特定の記事を特定の場所に常時固定で表示させたい!」という依頼を承ることが多くあります。

本記事では、管理画面で選択した記事を、トップページにPICK UP(ピックアップ)として常時表示するカスタマイズを「Advanced Custom Fields」プラグインを使用し、実装していきます。
それでは早速、今回のカスタマイズで使用する「Advanced Custom Fields」プラグインをインストールします。

Advanced Custom Fields
目次 [ひらく ▼]

インストール手順

公式サイトからインストールする

下記、公式サイトよりZIPファイルをダウンロードします。
WordPress管理画面(プラグイン > 新規追加)からZIPファイルをアップロードし、有効化します。

Advanced Custom Fields

WordPress管理画面(プラグイン > 新規追加)

WordPress管理画面からインストールする

WordPress管理画面(プラグイン > 新規追加)より、「Advanced Custom Fields」を検索します。
「今すぐインストール」より、インストールし、有効化します。

Advanced Custom Fields

Advanced Custom Fieldsの初期設定

インストールし、有効化します。
管理画面 > カスタムフィールド > 新規追加をクリックし、フィールドグループを新規追加します。

フィールドグループを新規追加

「+フィールドを追加」クリックし、「ラベル」「フィールド名」「フィールドタイプ」「選択肢」を設定します。

Advanced Custom Fields チェックボックス

「位置」の「このフィールドグループを表示する条件」を設定します。
「Custom Post Type UI」プラグインで追加した、カスタム投稿「コラム」へのみ、適用させたいので、条件は「コラム」とします。

Advanced Custom Fields ルール

設定の位置はデフォルトは「通常(コンテンツエディタの後)」ですが、「サイド」へ変更し、更新します。

Advanced Custom Fields 位置

記事編集画面に先ほど追加したカスタムフィールドが追加されていることを確認します。

カスタムフィールド

こちらで「Advanced Custom Fields」側での設定は完了です。

特定記事の表示制御カスタマイズ

それでは早速、本サイト(https://sd-webworks.com/)トップページの「よくある質問」と「コラム一覧」の間に「PICK UP」コンテンツを追加していきたいと思います。

特定記事の表示制御カスタマイズ

テーマファイルへの追記

カスタムフィールドの値による条件を指定します。
カスタムフィールド「PICK UP 表示」にチェックされた記事が公開日順に3記事固定表示されます。

PICK UP 表示

こちらで「Advanced Custom Fields」で特定記事の表示制御カスタマイズは完了です。

WordPressのWP_Queryでは、様々な条件で記事の絞り込みが可能です。
こちらの記事もご参照下さい。プラグインを追加しなくとも、仕様が実現できれば最適解です。

まとめ

「Advance Custom Field」プラグインを使用し、ピックアップをトップページに表示させる方法をまとめました。
「Advance Custom Field」はとても便利なプラグインなので、様々な使い方ができ、重宝します。

ホームページ制作会社は、WEBの知識がない人でも簡単に更新、運用出来るホームページを制作・納品することが重要と考えます。

ワードプレスのカスタマイズをご検討中の方へ

カスタマイズ

弊社では、ワードプレスのプラグイン導入・カスタマイズをサポートしております。
外部へカスタマイズを依頼したい、何をどうしたらよいかわからない、など初期のご相談も大丈夫です。お気軽にご連絡ください。

お問い合わせはこちら


この記事のURLとタイトルをコピーする
TOP