フッター部分のカスタムフィールドを利用するには、「カスタムフィールド名」に「footer_custom」と入力し、利用するコードなどを以下のように書き込みます。 入力が済んだら、「カスタムフィールドを追加」ボタンを押してください。 foreach($field as $value) { 先日、WordPress無料テーマ「Cocoon」でカスタム投稿タイプを追加してみました。初めての試みだったこともありつまずいたところがあったため、詳しい手順をここに書き留めておきます。これからCocoonでカスタム投稿タイプを追加しようと考えている方の参考になれば幸いです。 Wordpressのちょっとしたお悩み解決します かゆいところに手がとどくカスタマイズを提供します. 最近、新しいWordPressサイトを立ち上げました。テーマはCocoonを初めて導入してみたのですが、無料とは思えないほど充実した機能や、カスタマイズ性の高さに驚きました。, SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。, 運営する上で必要を感じたため、カスタム投稿タイプを追加してみたのですが、初めての試みだったこともありつまずいたところがあったため、詳しい手順をここに書き留めておきます。, スクリーンショット画像を盛り込み、あまりコードに詳しくない方でもわかりやすいように仕上げました。これからCocoonでカスタム投稿タイプを追加しようと考えている方の参考になれば幸いです。, カスタム投稿の一覧ページはサムネイル無しのシンプルなものにしました。HTML/CSSが分かる人なら、自由にデザインすることができます。, function.phpを編集するときは、必ず手を加える前のfunction.phpをダウンロード・保存しておきましょう。このファイルは、テーマを動かすための重要なファイルですので、編集を誤るとブログが表示されなくなる場合があります。万が一ミスしてブログが動かなくなっても、編集前のfunction.phpに差し替えれば元どおりになります。自信のない方は、必ずバックアップをとっておきましょう。, カスタム投稿タイプを追加します。今回はシンプルな「お知らせ」投稿タイプを作ります。, カスタム投稿タイプのスラッグや名前などは、適宜お好きなものに変更してください。これを、子テーマのfunction.phpの末尾に追記します。, WordPressにログインしてみると、これだけでダッシュボードに新しいカスタム投稿タイプが追加されているはず。Cocoonに搭載されているページ設定やメモなど各種機能も、ばっちり使えます。, ただ、このままだと「お知らせ」投稿を作成しても、そのページにアクセスすることができません。, それは、「お知らせ」投稿タイプの本文を表示するためのphpが用意されていないためです。「お知らせ」アーカイブページについても同様に、テンプレートとなるphpがないため表示できません。記事や記事一覧にアクセスしようとすると、いずれも404ページに遷移してしまうはず。, WordPressテーマ開発の決まり事として、phpファイルは以下のように命名される必要があります。, そこで、個別投稿ページ「single.php」を複製し、「single-スラッグ.php」という名前にして、子テーマのfunction.phpと同じ階層に置きます。今回の場合、カスタム投稿タイプのスラッグはnewsなので、ファイル名はsingle-news.phpになります。, これだけでは、新しいカスタム投稿タイプのパーマリンクが生成されていないため、まだ個別ページが表示されないはずです。, そこで、パーマリンク生成のため、WordPressダッシュボード>設定>パーマリンク設定で、ページ下部の「変更を保存」ボタンをクリックします。設定内容に変更を加える必要はありません。, これでパーマリンク設定を更新されたため、カスタム投稿タイプの個別ページが表示されるようになります。, テーマ「Cocoon」では、ユーザーの需要・要望に応じた柔軟なカスタマイズ性を実現するため、ブログを構成するパーツごとに細かくphpファイルが分けられ、必要に応じたファイルを呼び出してレイアウトを構築する仕組みになっています。, single.phpを複製して作ったsingle-news.phpの中身を見ると、以下のような記述があります。, 「tmp/single-contents.php」を参照し、このファイルの記述に従って投稿ページの内容を構築する、という指示です。, カスタム投稿ページのデザインを変えたい場合は、tmp/single-contents.phpを参考にして自分で新しいページをデザインし、そのphpファイルを読み込ませるよう、single-news.phpを変更します。, ただ、Cocoonにはarchive.phpが用意されていませんので、代わりにindex.phpを複製します。, 名前は「archive-(スラッグ).php」に設定します。今回の場合、カスタム投稿タイプのスラッグはnewsなので、archive-news.phpを作成しました。, これでカスタム投稿タイプの一覧ページが作成されました。アドレスは、サイトのURLの後ろにカスタム投稿タイプのスラッグをつけたものになります。, 個別ページのときと同じく、get_template_part(‘tmp/list’); の部分で呼び出しているテンプレートでデザインが決まります。, tmp/list.phpを参考にしつつ自分でテンプレートを作成し、そのテンプレートを読み込ませればデザインを変更できます。, より細かく条件設定したい場合などは、index.phpのの直後に、以下を追記します。, カスタム投稿タイプを使いこなせると、サイトに幅ができます。最初は難しく感じるかもしれませんが、ぜひ挑戦してみてください。, どうしてもうまくいかなかったり、時間をかけずにカスタム投稿タイプを追加したい場合は、有償にて承ります。まずはお気軽にご相談ください!相談は無料です。, 2019.4.6〜プログラミング勉強を始め、同年8月に未経験ながらWeb制作会社に就職したWebデザイナー・コーダーです。ゲーム、映画、漫画、そして科学が大好きな薬学出身者。 echo $value . } 【徹底解説】WordPressカスタムフィールドの設定方法+おすすめプラグイン. else { Copyright - gtgt, 2018 All Rights Reserved. 「この記事の管理者」というキーに対して「佐藤太郎」を設定した表示例になります。, WordPressのカスタムフィールドには、もっと拡張性を高くし、使いやすくするプラグインがあります。, その代表的なプラグインが、「カスタムフィールドテンプレート(Custom field Template)」になります。, 上図からも、キーはあらかじめ表示されていて、入力方法もテキストだけじゃなく、コンボボックスやチェックボックスなどが追加されている事が分かります。, wordpressのカスタムフィールドで設定した値は、デフォルトだと検索対象外となっています。, 例えば、下図のようにカスタムフィールドを設定していたとして、「山田太郎」と検索したとしても、この記事は検索に引っかかりません。, そこで当章では、カスタムフィールドもちゃんと検索対象にするプラグインを紹介します。, 「Search Everything」は、WordPressの検索機能の検索対象を広げることができるプラグインです。, インストールや設定手順(使い方)については、下記記事にてまとめているので、ぜひ参考にしてください。, ・Search Everything – 検索対象をカスタムフィールドにまで広げられるWordPressプラグイン. その後、新規に追加する記事では、Cocoonのカスタムフィールドに「head_custom」「footer_custom」が居るようになりました。 最初の一歩で迷うようです。 WordPress Memo }, 上記は、「この記事の執筆者」のキーにひもづく「値(バリュー)」がある場合は、その値を表示し、 echo get_post_meta($post->ID, ‘この記事の執筆者’, true); $field = get_post_meta($post->ID, ‘この記事の執筆者’, false); the_content( __( ‘Continue reading ’, ‘twentyfourteen’ ) ); WordPressとは?ワードプレスのインストール方法・使い方と、オススメの無料テーマ(テンプレート)・プラグイン紹介, Search Everything – 検索対象をカスタムフィールドにまで広げられるWordPressプラグイン, wordpress(ワードプレス)のバックアップ方法(データベース:mysqlとファイル一式)と、おすすめプラグイン2選, CSRF(クロスサイト・リクエスト・フォージェリ)とは?その仕組みと対策方法について, Chromeで閲覧サイトのCookie情報を確認する方法と、編集・削除・追加する方法も, curlコマンドの使い方 ~GET、POST、REST(json)の確認と、windowsでの利用手順, 「Advanced REST client」の使い方まとめ ~GoogleChromeの拡張ツール, WordPress(ワードプレス)のseo対策で、おすすめのプラグイン、テーマ・テンプレートと、やっておくべ設定, ブランディングの意味とは?企業(会社)や自分(セルフ)のブランドイメージ戦略(手法)は、ブログやデザインが重要, インバウンド(inbound)マーケティングとは?ソーシャルメディア活用など、BtoBの会社(企業)が知るべきWeb事例, メルマガ(メールマガジン配信)の開封率を上げるテンプレート素材(無料・HTML版)の作成(作り方)と、文章の書き方とは, コンテンツ(インバウンド)マーケティングとは?seoとも相性の良い「最新webマーケティング」のセミナー内容について, Web(ネット)マーケティングとは?ウェブコンサルティングのプロが、セミナー(講座)で言った、企業ブログの運営手法, ランディングページとは?landing pageの作り方(制作手順)と、LPO対策で重要な8つのポイントをまとめてみた, ネオヒルズ族とは?ネオヒルズ族の稼ぎ方で問題になっている点や逮捕事例についてまとめてみた, キャッチコピーとは?読者の注目を一瞬で惹きつけるキャッチコピーの作り方をまとめてみた, 文章の書き方で4つのポイントを守ったら、1記事で1日500人以上の方に読まれるようになった, Google対策に必須!ウェブマスターツール(WebMasterTool)へのサイト登録と基本的な使い方, ハッキング対策まとめ!自分のサイトを守るためにやっておかなければならない10のこと, デフォルトの場合、キーは「ドロップダウン」で選択する必要がありましたが、このプラグインを利用することで、あらかじめ表示されている状態となり、キー設定の効率化になります。, デフォルトの場合、データの入力方法は「テキストボックス」だけだったのが、チェックボックス、ラジオボタン、コンボボックスなどの方法が追加できます。. wordpressのカスタムフィールドとは・・・WordPressの投稿(記事)に、任意の情報(メタデータ)を追加できる機能のことです。, 例えば、下図は、記事の編集ページにて、カスタムフィールドを追加する画面になります。, ここでは、記事に対して、「この記事の執筆者:山田太郎」という情報を追加しているのです。, このように、記事情報として「タイトル」と「本文」だけではなく、任意に項目を追加できる機能が、カスタムフィールドです。, 今回の記事では、この「カスタムフィールド」の設定手順と、設定した「カスタムフィールド」を、記事の公開ページにて表示させる手順。, ※Wordpressの基本的な使い方やインストール手順については、こちらでまとめています→WordPressとは?ワードプレスのインストール方法・使い方と、オススメの無料テーマ(テンプレート)・プラグイン紹介, 当章では、記事の投稿ページにて、カスタムフィールドを設定する手順について、順に解説していきます。, では、まずWordpress管理画面のメニューから「投稿」→「新規追加」を選択して、新規投稿画面を表示してください。, 新規投稿画面が開いたら、上部に「表示オプション」というメニューがあるので、そちらを選択すると、オプション一覧が表示されます(下図、参考), その中から、「カスタムフィールド」にチェックをつけてください(デフォルトでは、付いていない), ここで、「カスタムフィールド」の名前(キー)と値(バリュー)を設定し、「カスタムフィールドを追加」ボタンを押下します。, 以上で、設定は終わりですが、これだけでは、記事ページを表示しても、「カスタムフィールド」は表示されません(下図、公開ページ), 記事の公開ページに、設定した「カスタムフィールド」を表示させるには、利用中のテーマ・テンプレートファイル(PHP)を少しカスタマイズする必要があります。, 当章では、設定した「カスタムフィールド」を、記事ページに表示させるためのカスタマイズ手順について、順に解説していきます。, まず、カスタマイズ対象のファイルは、利用中のテーマ・テンプレートの「content.php(パス:wordpress/wp-content/themes/●●●/content.php)」になります。, ※今回、使用したテーマ・テンプレートは、「TwentyFourteen」になります。, 「content.php」は、記事ページのテンプレートファイルになるので、こちらをカスタマイズすることで、「カスタムフィールド」を表示させることができるんですね。, 「the_content()」では、記事本文が表示されるので、その下に「カスタムフィールド」を表示するソースを追加する。前提で、以降進めていきます。, では、「カスタムフィールド」を表示するソースですが、以下4つに分けましたので、用途に応じて使い分けてください。, ここでは、同じ名前(キー)で、値(バリュー)が複数設定されている場合を考慮して、複数の「値(バリュー)」を表示するソースを紹介します。, foreach($field as $value) {