などがあります。 2. という３行で記述されています。 今回は、サイト上にページのナビゲーションを表示できるプラグイン、WP-PageNaviの... サイトを運営していく上であったら便利な機能の一つに、問い合わせフォーム機能があります。ブログやサイトにお問い合わせフォームがあることで仕事につながったり、ユーザ... WordPressで会員制サイトを作る上で定番のプラグイン「Theme My Login」について紹介していきます。
label：投稿画面で表示されるテキスト（注意事項など） 下の画像のように、テンプレートの名前とテンプレートの項目を記載します。 今回の記事は以上です。 東京都江東区住吉1丁目17-20 住吉ビル7F
テーマを直接編集するのが怖いという初心者の人は、プラグインを利用すると簡単です。今回は、Custom Post Type UIを紹介します。 なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。 また、カスタムメニューはドラッグ&ドロップで簡単に表示順を変更することも可能です。 100(%) ÷ 16(横の比率) x 9(縦の比率) = 56.25になるんですね。, 自由に項目を作成できるカスタムフィールド。そのデータはDBに登録されるので、簡易フォームとして活用して、コンテンツの作成や各種マーケティングに役立てることもできます。 add_action( ‘init’, ‘create_post_type’ ); 「Custom Post Type UI」っていうプラグインを使うと、簡単にカスタム投稿タイプを使えるようになるよ。 そして、本文中のカスタムフィールドを挿入したい場所にショートコード[cft format=0]を入力します。 なるほど！カスタム投稿タイプを使うと記事が書きやすくなりますね♪ [住所] 田島悠介 田島悠介 フィールドタイプ ： テキスト なお、カスタムフィールドやカスタムタクソノミーの機能と合わせることで、使いやすい投稿フォームを簡単に作ることができます。 [出版年] ぱっと見で分かりやすいものから、なんだかよくわからないものまで盛りだくさんですね！ size = 35 ); ・Editor(編集者) function create_post_type() { 特定の投稿に付随するのではなく、独立したページとして使う際に使用します。こちらも詳細は後ほど！, 管理画面で設定しただけでは、カスタムフィールドの内容はWebサイト上で確認することはできません。 なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。 WordPressにログインしているユーザーによって表示条件を変えられます。 プラグインを使うと手軽に使えるよ。 ‘edit_terms’ => ‘publish_guides’ 田島悠介 作成したカテゴリー自体をメニュー表示にすることもできます。 そのカスタムフィールドについて初心者向けに設定方法を紹介します。カスタムフィールドの設定は、初心者にとっては難しいところもあるので、プラグインを使った方法もあわせて解説していきます。 記述ルールはシンプルで、 作成したカスタム投稿タイプ・カスタムタクソノミーの編集 [本のタイトル] カスタムフィールドを表示させる方法 label = ※５段階評価 なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。 register_post_type( ‘news’, // 投稿タイプ名の定義 表示は「ウィジェット」の設定で行います。 田島悠介 参考：関数リファレンス/get post meta, 2020年9月現在、最新バージョンである4.1.5では以下の項目を設定可能です。 この時、必須マーク（赤色*）は表示されています 追加できたら、タイトル欄に「サイト上で表示したいメニュー名」を入力し、その下の「メニューを選択」プルダウンから、先ほど作成したカスタムメニューを選びます。 ); 大石ゆかり 更新すると、ダッシュボードに「投稿」とは別の新たな「新着情報」という項目ができています。 これがタイトルや本文など、記事固有の情報を出力するテンプレートですが、まずは手っ取り早くページ内に表示してみましょう。, ただし、上記はSmart Custom Fields固有の書き方になるので、以下の汎用的な書き方がおすすめです。 「固定ページ」「カスタムメニュー」「カテゴリ」を追加できるので、サイト内外のあらゆるページをメニューに挿入できるのがわかると思います。 カスタムメニューを自分好みに変えて、より使いやすい・オリジナルのサイトを作成してみてください。 ショートコードは[cft format=0]です。=以下の部分が、テンプレートのNoです。 プラグイン「Advanced Custom Fields」を利用して追加したカスタムフィールドについて、 [PR] WordPressで挫折しない学習方法を動画で公開中プラグインを利用する array( [cft] and [cftsearch] ShortCode Format（4番目） 今回は新着情報としましたが、先ほど書いたコードを変えれば他の表示も可能です。 ５．「テスト項目」は未入力で更新ボタン押下 WordPressの管理画面のカスタマイズ, メニュー「Smart Custom Fields」から使いたいカスタムフィールドのページを開いて、「表示条件（オプションページ）」で、作成したオプションページを選択すればOKです。, あとはオプションページで好きな項目を入力して、出力するのみ。出力方法は以下の通りです。, ここではSmart Custom Fieldsでカスタムフィールドを作成する上でよく使いそうなカスタマイズ方法をいくつかご紹介します。, 日付ピッカー・時刻付き日付ピッカーで対応しているフォーマット以外で出力することも、実はできるんです。, date関数を使えばOKです。使用できるフォーマットは以下にあるものなので、グッとバリエーションが増えますね！(曜日については問答無用で英語になるようです) Developer Resources: Dashicons ④表示条件（プロフィール）： type = text カスタムフィールドについてはわかったんですけど、もう少し手軽に扱うことってできないですか〜？ カスタムフィールドが使えるプラグイン 通常のWebサイトですと、リンク先ページのURLを変更すると全てソースの変更が必要でした。それが、カスタムメニューだと（固定ページやカテゴリなどで追加したメニューに関しては）自動的にURL変更に対応してくれるので、リンク切れになるリスクも少なくなります。 [評価] ・各カスタムフィールドを設定する ‘menu_position’ =>5, ぜひ、WordPressの使い方を覚えましょう！ 今回の記事は以上です。 ただしWordPressやSmart Custom Fieldsのバージョンによってはドラッグで位置を変えられるので基本的にスルーしていいと思います。 「テンプレートタイトル」と「テンプレートコンテンツ」に入力します。 投稿タイプ名や、ラベル名などを入力します。 そうだね。アレンジの仕方がとても豊富だから、状況に応じて使い分けができるね！ 田島悠介 textarea：複数行のフィールド インストールと有効化が完了すると、ダッシュボードに「CPT UI」という項目が追加されています。 入力フォームの登録 register_taxonomy( （複数作成する場合に区別します） https://github.com/AdvancedCustomFields/acf/issues/90, 下記ページで、暫定的な対策として [公開/更新] ボタンを無効にする JavaScript のコードが提示されています。試してみてはと思います。 array( 大石ゆかり ただ、導入には手間がかかります。その手間を省いて、初心者でも簡単にカスタムフィールドが追加できるのが、このCustom Field Templateです。 そうだね。親子関係のあるサイトなんかもわかりやすく紹介できるから、活用するといいね♪ 簡単にカスタム投稿タイプを作れました〜！！！ 特定のカテゴリやタグの時に表示するか設定できます。 ダッシュボードで表示を確認すると、カスタム投稿タイプの中に作成したカスタムタクソノミーが表示されていることがわかります。 WordPressのカスタムメニューで画像を使いたいと考えたことはありませんか？このコンテンツでは、カスタムメニューのテキストを画像に置き換える方法をご紹介しています。興味のある方はご覧くださ … ４．新規投稿画面で「テスト項目」が表示されることを確認 ぜひ活用してみてください。 それでは、設定したカスタムフィールドの項目を表示してみましょう！, 表示したいと思っているページや使用しているテーマによって、該当するテーマファイルがばらばらなので、ここが初心者の方にとっては一筋縄ではいかないところ。, ここではプラグインを使用して、初心者でも簡単にテーマファイルを特定する方法をご紹介します。 こんな感じになります。手順は改行が反映されなくなるようなので「・」や「→」などで手順っぽく表現する工夫が必要そうです…。, カスタムフィールドの項目が設定できたら、今度は表示条件を設定しましょう。 ) このショートコードを記入しないと、投稿に反映されないので注意してください。 今回はカフェブログを作るという想定で、1つずつ紹介していきます。 名称などは、お好みで変更してください。 などを構築する時に、デフォルトの機能ではお店の情報などを定型的に表示することができず不十分です。 （管理画面上ではデフォルト：falseになっていますがtrueがデフォルトのようです。）, 【WordPress】Smart Custom Fields の日付ピッカーの使用方法, というのも使用しているライブラリが違っており、日付ピッカーは「jQuery UI」、時刻付き日付ピッカーは「flat picker」を採用しています。, こちらも普通に出力すると、投稿IDが返ってくるので、これを使ってお好みの形式で出力できるようにしましょう。 WordPressでWebサイトを作成するときに、「決まった項目をわかりやすく入力したい」「簡易的なフォームを作成したい」という場合に便利なのが”カスタムフィールド”という機能です。, WordPress標準の機能ですが、そのままだと使いにくく分かりにくいので、プラグインを使う方法が主流です。 大石ゆかり ここで、下記のコードを入力し、更新します。 [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。, 独自のカスタムフィールドを作成できる！Advanced Custom Fieldsの使い方ーWordPressプラグイン【初心者向け】, Google XML Sitemapsの使い方ーWordPressプラグイン【初心者向け】, ページ送りが簡単に！WP-PageNaviの使い方ーWordPressプラグイン【初心者向け】, 会員制サイトが作れるTheme My Loginの使い方ーWordPressプラグイン【初心者向け】, Custom Field Templateの使い方ーWordPressプラグイン【初心者向け】, Custom Post Type UIの使い方ーWordPressプラグイン【初心者向け】. 田島メンター！！カスタム投稿タイプってとても便利なんですけど、もう少し使いやすい方法ってないんですか〜？ WordPressのカスタムメニューで画像を使いたいとお考えになったことはありませんか？, 上記のようなメニューですね。 灰色の画像1～5の部分は、テキストではなく画像が使われています。, カスタムメニューから作成できるメニューは基本的にテキスト形式。 項目部分で画像を使おうとすれば、CSSで背景に設定するなどしなければなりません。, WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。, 画像のサイズはメニューの横幅から各メニュー項目の横幅を算出し、ピッタリのサイズを作成することをお奨めいたします。, サイズが大きい分には縮小表示できるので良いのですが、サイズが小さいと色々と不具合が出てきます。, サイズはできる限りピッタリにするか、少なくてもメニュー項目の横幅よりも大きいサイズにしましょう。, あとは、各画像のサイズが縦横比は同じにしておきましょう。 縦横比が異なると、見た目が悪くなる場合があるためです。, FTPからどこかのフォルダにアップロードしても良いのですが、FTP接続が面倒という方もいると思いますので、今回はWordPressの管理画面からメディアにアップロードします。, メディアにアップロードしたとき、上記赤枠部分にある画像URLを控えておいてください。 ここで控えたURLは、手順4で使用します。, 【メニュー項目に設置する画像のURL】は、手順3で控えたURLに置き換えます。 【メニュー項目の】横幅は、メニュー項目の横幅（例：200px）に置き換えます。 【代替テキスト】は、メニュー項目に置き換えると良いかと思います。, 上記の様に画像タグを挿入してください。 全ての項目ごとに画像タグの設置を行い保存してください。, 画像が表示されていない場合、これまでの手順に誤りがある可能性が高いです。 手順に誤りが無いか再チェックしてください。, 上記の4ステップで、簡単にカスタムメニューで画像を使えるようになります。 興味のある方は、ぜひ挑戦してください。, あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。 次に該当する方は、お気軽にご相談下さい。, 岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。, WordPressの検索機能でカスタムフィールドの値を検索対象にする方法をまとめてみました。紹介しているコードをコピペ＋微調整するだけのお手軽なカスタマイズです。興味のある方は、挑戦してみてください。 記事を読む, RSSフィードでショートコードを無効化したいことってありませんか？このコンテンツでは、RSSフィードでショートコードを無効化する方法を2つご紹介しております。興味のある方はコンテンツをご覧ください。 記事を読む, WordPressの固定ページにオリジナルテンプレートを設定する方法をご紹介しています。テンプレートの作り方から設置方法まで詳しく解説してみましたので、興味のある方は参考にしてください。 記事を読む, WordPressでオリジナルショートコードが変な位置に出力されて困っていませんか？このコンテンツではこの問題の解決方法をご紹介しています。興味のある方は、コンテンツをご覧ください。 記事を読む. } ) 有効化して、カスタムフィールドを表示させたいページを開くと… 例えば、通常の投稿はブログとして使い、それ以外にも「商品の紹介」や「ポートフォリオ」、「更新情報」などテンプレートとしてカスタム投稿タイプを利用することができます。 ), なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。 カスタムフィールドを新規追加します。 新規追加の画面です。今回は、関連記事を3件選べるようにします。 入力中の画面です。「フィールドを追加」して、まずは関連記事の入力欄1つめを作ります。 —-【各項目の解説】 ・フィールドラベル ‘rewrite’ => array( ‘slug’ => ‘washoku’ ),// カスタムタクソノミースラッグ名 さらにWordPressを使いこなしたい場合は、WordPressでカスタム投稿タイプを作成する方法も合わせてご覧ください。 [本の表紙画像をアップロード] お好みのアイコンの”dashicons~”という文字列をコピペすればOKです！, メニューの位置は以下を参考にして設定してみてください。 ちなみに、上記画像で入力したテンプレートの内容は、以下の通りです。 固定ページや、カテゴリ一覧、好きなページなど、オリジナルのメニューを編集・表示できる仕組みです。 [評価] 現在の気分: 幸せいっぱい 今読んでいる本: 星の王子様 BGM: Rock Around the Clock 今日の天気: 晴れ テーマ（function.php）を編集する 1.functions.phpにオプションページの設定を定義する ‘label’ => __( ‘中華’ ),// 表示するカスタムタクソノミー名 なお、「//」以下はコメントアウト（メモ書きできる）部分なので、あとでわかりやすいように補記しておくと安心です。 1．プラグイン「Advanced Custom Fields」をインストール（バージョン 5.8.11） 2．カスタムフィールドメニューでフィールドグループを追加（グループ名：テストフィールド） 3．グループ「テストフィールド」内に下記項目追加
‘name’ => __( ‘新着情報’ ), // 表示する投稿タイプ名 ※表示テンプレートの登録 今回はWordPressのカスタムフィールド機能を便利に使い倒すプラグイン「Smart Custom Fields」（SCFと略されることもあります）について、インストール方法から、WordPressの実装でよく使うカスタマイズ方法まで、徹底的にご紹介いたしますのでぜひブックマークしてご覧ください！ （labelについてはなくても問題ありません） テーマのphpファイルを編集する必要もないので、初心者でも気軽に使うことができます。 [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。, WordPressで作成したWebサイトで、より見やすいサイトナビゲーションに欠かせないのが、「カスタムメニュー」という機能です。 場所はどこでも構いませんが、筆者はあとで追加が分かりやすいように上の方に入れています。 設定項目が複数ありますが、カスタムフィールドを使うためには入力フォームの登録と表示テンプレートの登録という2箇所だけを最低限設定すればOKです。 「選択できる個数」を2以上に設定した場合はループで出力するのを忘れずに！, 取得できる項目は他にもあるので、関数リファレンス/get postをご参照ください。, ここからは、ところどころで「後ほど解説します」と書いていた、Smart Custom Fieldsのより便利な機能について解説いたします。 add_action( ‘init’, ‘people_init’ ); 順番に見ていきましょう。, 基本フィールドは以下の4種類です。テキストエリアはテキストとほぼ同じなので割愛します。（余談ですが、”基本”の基準がよくわからないのはわたしだけでしょうか…。）, これも表示がどうこう、というものではないようです。 投稿画面を開くと、投稿エリアの下に先ほど設定した項目が表示されています。
カスタムタクソノミーとは カスタムフィールドを使えば、あとで「評価が高い順番に並べ替える」といったことも柔軟に行えるようになります。 [PR] WordPressで挫折しない学習方法を動画で公開中カスタムフィールドを表示させる方法 表示するには、さらにページの重要ファイルを編集する必要があり、PHPなどの知識がないとつまずいてしまいがちです。 具体的な作り方は、公式のブログで分かりやすく説明されてあるので、こちらをご覧ください。, テキストエリアやチェックボックスなど、各カスタムフィールドはどう設定したらいいの？という場合はこちらがよくまとまっています。, Smart Custom Fieldsのインストールから便利な使い方まで説明してきました。 仕組みまで詳しく知りたい！という方はこちらをどうぞ。 どの投稿タイプで表示させるかを決められます。「投稿」「固定ページ」「（作成していれば）カスタム投稿」「（プラグインによっては）プラグインの設定画面」から選べます。 [PR] WordPressで挫折しない学習方法を動画で公開中作成したカスタムメニューを表示させる type =textarea 今回はWordPressのカスタムフィールド機能を便利に使い倒すプラグイン「Smart Custom Fields」（SCFと略されることもあります）について、インストール方法から、WordPressの実装でよく使うカスタマイズ方法まで、徹底的にご紹介いたしますのでぜひブックマークしてご覧ください！, Smart Custom Fieldsはカスタムフィールドを管理画面上で簡単に管理できるようにするWordPressのプラグインです。 本記事では、カスタムメニューの設定方法について初心者向けにまとめます。 ・Contributor(寄稿者) ちょっと慣れが必要だね。でも、「Custom Field Template」っていうプラグインを使うと、手軽にカスタムフィールドを使えるよ！ 例えば、 画面を見て「むむっ？」と疑問に思った方もいるかもしれないので、両者の違いを確認してみましょう。 大石ゆかり 手順は文字通り（？）手順を想定しているので、1行＝1工程になります。対してメモは本当にメモ程度のさらっとした注釈を書く感じでしょうか。, こんな感じで設定して、 〒135-0002
田島悠介 カスタムタクソノミーとは、カスタム分類とも呼ばれる機能です。これは、カスタム投稿タイプにとってのカテゴリーやタグにあたります。 まず、ダッシュボード＞外観＞テーマ編集 を開いてください。 本のタイトル