投稿の仕組み化!! (1)初心者向けカスタムフィールドの使い方

"カスタムフィールド"という便利な機能があるの知ってますか? 記事投稿画面にあるコレです。 すべての写真-172 このカスタムフィールド、なくても問題ないけど、使い方によってはかなり便利な機能なのです。 またカスタムフィールドは、標準で備わってる機能なのでそのまま使えるのですが、私のような初心者には難しかったので、使いやすくしてくれるプラグインも合わせて紹介します。 [aside type=”normal”]ないよという方 おそらく非表示になっております。画面上方にある「表示オプション▼」を押して、カスタムフィールドにチェックを入れると出てきます。(今回は、プラグインを使うため、別で表示されるので、出さなくてもいいです。)[/aside]
こんな方にオススメ
  • 入力を簡素化したい人
  • 店舗情報など毎回決まった形を入れているサイトの運営者様
  • 複数人で運営しているサイトの運営者様
  • カスタムフィールドとは

    記事の投稿画面には、"タイトル"や"本文"、"アイキャッチ"など入力する箇所があると思います。カスタムフィールドは、これに新たなフィールドを追加できる機能です。 例えば、グルメ記事の場合、「店舗名」「電話番号」「住所」などの店舗情報を入力するフィールドを作成することができます。 さらに、このフィールドに入力することで本文は触ることなく、記事に店舗情報を出力させることが出来るのです。 このMy timeのグルメ記事の最後に登場する店舗情報も、このカスタムフィールドを使っています。 そうすることで、HTMLタグでごちゃ混ぜになりがちなテーブル(表)形式の店舗情報も本文をいじることなく載せることができています。 (※ 予め設定は必要です) IMG_2229

    メリット1:入力が楽になる

    投稿画面では、作成したフィールドに情報を書き込むだけで入力が完了します。

    メリット2:修正が楽になる

    入力情報に変更があった場合にも、本文を触ることなく、修正ができます。修正中にタグを崩してしまうミスもなくなり、スムーズです。

    メリット3:形式が統一される

    形式が統一されることで、サイト全体の統一感が増し読者の方に優しいサイトになります。 またデザインが飽きた場合も、カスタムフィールドの表示デザインをいじるだけで、全ての記事のデザインが変更されるのも最大のメリットです。

    メリット4:投稿アプリ「PressSync pro」が対応している

    「PressSync pro」は、スマホやタブレットからwordpressへの記事を投稿できる、便利なアプリです。残念ながらAndroidアプリはないのですが、私はiPhoneやiPadから記事のほとんど全てを書いているのですが、このアプリのおかげで投稿がかなり楽になりました。 そんな「PressSync pro」のいい機能はたくさんあるのですが、おすすめの機能のひとつに入力支援システムがあります。この入力支援システム、文章の装飾を入力を手助けするほかに、カスタムフィールド用の入力支援もあるんです!!!! 「設定」→「システム設定」とタップし、スクロールすると下から3つ目にある「カスタムフィールド入力支援一覧」を使うと、投稿時の投稿オプションの日付の下に、カスタムフィールド用入力フォームを出すことが!!! IMG_2227 HTML入力箇所を減らすだけで、投稿がグゥンと楽になりました。 PressSync proのカスタムフィールド用入力支援については、こちらの記事に詳しく書きました。 関連記事のIDを正しく入力してください
    [adsense]

    カスタムフィールドの導入方法

    プラグイン「Custom Field Template」を使う【初心者向け】

    「Custom Field Template」は、PHPファイルをいじることなく簡単にカスタムフィールドを用いることのできるプラグインです。設定箇所がたくさんあるんですが、「カスタムフィールドテンプレートオプション」と「ショートコードフォーマット」の2つだけ設定を行えば、記事に貼り付けるショートコードが生成されるので、簡単に使用できます。 すべての写真-165 今回は、例として「店舗名」「電話番号」「住所」の3つの入力フィールドを作成し、記事への反映の仕方を紹介します。

    カスタムフィールドテンプレートオプション

    すべての写真-163
  • テンプレートタイトル
  • 自分がわかりやすいタイトルにして下さい。 今回は
    商品紹介
    としておきます。
  • テンプレートコンテンツ
  • 作成したいフィールドの情報を記入していきます。
    [name]
    type = text
    size= 35
    label = 店舗名
    
    [zip]
    type = text
    size= 35
    label = 郵便番号
     
    [address]
    type = text area
    size= 35
    label = 住所
     
    [tel]
    type = text
    size = 35
    label = 電話番号
    と入力すると、投稿画面に設定した入力フィールドがこのように表示されます。 すべての写真-164 [aside type=”normal”]入力法則
    • [ ]に挟まれた部分:IDにしたい文字を入力(アルファベットでも日本語での可能です)
    • 「type」:カスタムフィールドの種類 text(テキストを入力するフィールド)の他に、textarea(テキストエリア)やcheckbox(チェックボックス)、radio(ラジオボタン)、select(セレクトタブ)、file(ファイル形式)から選ぶことが出来ます。
    • 「label」:投稿画面で表示される補足説明を入力
    [/aside]

    ショートコードフォーマットの作成

    投稿画面で入力した情報を記事にどのように反映させるかを設定する場所です。 そのまま表示でいい場合は
    
    店舗名:[name]
    住所:[address]
    電話番号:[tel]
    
    と入力すると
    店舗名:○○ 住所:△△県~市・・・・・ 電話番号:000-000-0000
    と表示されます。 テーブルで表示したい場合は
    <table>
    <tbody>
    <tr><th>店舗名</th><td>[name]</td></tr>
    <tr><th>住所</th><td>[address]</td></tr>
    <tr><th>電話番号</th><td>[tel]</td></tr>
    </tbody>
    </table>
    
    と入力すると
    すべての写真-162
    と表示されます。

    ショートコードを記事に貼り付ける

    「Custom Field Template」には、記事に貼り付けるショートコードが準備されてますので、あとは記事の入れたいところに入れるだけで、こんな店舗情報などがあっという間に挿入できますclass=”fa fa-star” aria-hidden=”true”>

    プラグインの使用をしないで使う

    長くなったので別記事に書きます。

    さいごに

    いかがだったでしょうか。 参考になれば幸いです [aside type=”normal”] 「わかりにくい」「間違ってる」などあれば、問い合わせフォームよりご指導頂けると嬉しいです。[/aside]