仕事の話

【WordPress】紹介系ブログ記事用!コピペで作るカスタムフィールドテンプレートの設定方法

どうも、綺麗なわたぬきを作ろうとせっせと別のブログを立てたものの、自らの美しさに打ちのめされそうなナルシストです。
ちなみにこちらのサイトです。https://sampo-note.net

散歩で立ち寄った場所や店を紹介するブログにしようかなあなどと思い、プラグインを探したんですよね。
そんで、絞り込んだ選択肢は2つ。
「WP Product Review」または「カスタムフィールドテンプレート」だ。

シンプルにレビューしたいなら「WP Product Review」はすごく有能だ。アフィリエイトにも向いてるしCV上げるにはイチオシしたい。
しかしH1~3を表示部分に使ってるせいで、大体のブログに入ってるTOC+とめっちゃくっちゃ相性が悪い。目次にレビュー項目が出てきちゃう。
そこで「ここが推しなんだ聞けよ!!!!」って話もしやすい「カスタムフィールドテンプレート」で自分好みのレビュー表示を作ろうじゃないか。
コピペだけでベースが作れるから、あとは各自お好みで改造してくれ!!

用意するプラグインは2つ!

Simple Map

地図を表示するすごいシンプルなマップだけどすごい便利なやつ。
ショートコードを使って何枚でもこんなふうな地図を挿入できる。
ショップ系の紹介をするなら絶対入れておきたい便利プラグインだ。

東京都千代田区永田町1-7

 
有効化するときにGoogleからコード取ったりする必要があるけど、プラグインの設定ページに全部書いてある。

Custom Field Template

カスタムフィールドを作って、投稿ページに表示させるプラグイン。
カスタムフィールドってあれこれやるのめんどくさいけど、コイツがいればHTMLの知識が少々あればすぐに作れる。

他にAddQuickTagとかあるといいんだけど、まあ、普通にWordPressでブログ書く人はみんなとっくに入れてるよねってことで割愛。
入れてない人は入れといてね。

コピペで作るショップレビュー!!
カスタムフィールドテンプレートの設定方法

とりあえずこんな感じの表示をするテンプレートを作るぞ。
カスタムフィールドテンプレートの詳細な設定や使い方は、自力で他のブログを検索してくれ。先達がものすごく細かい紹介をしてくれてる。
今回はコピペのみでそれっぽい店舗紹介やレビュー表示を作るのが前提だ。
ということで、↑を出すためのフィールドの内容はコレだ。
カスタムフィールドテンプレートオプションを開き、コピペする。

項目は自分の好みで変えて。
今回は出力しないけど、画像も一応アップロードできるようにしておきます。
そして次、出力する表示画面を作るよ。
[cft] and [cftsearch] Shortcode Formatを開き、コピペだ。

これで住所を入力すると自動的に地図までくっついてくる素敵レビューフォームが完成だ。
最後に外観>CSS編集にこれをコピペ

CSSが汚い?知らねーーー!!気になるなら自分できれいにしな!!
ちなみにこんな感じのテンプレート入力フォームが記事作成画面の下の方に出てくる。
画像のアップロード機能はつけたんだけど、実はエディターのところでもメディアの追加ができるから、変なところに出力させるよりエディター部分から挿入したほうがいい気もするんだよね。
ここにチェックを入れてこれを画像を挿入したいところにコピペする。
<?php echo wp_get_attachment_image(get_post_meta($post->ID,”image”,true),’full’);  ?>
これで下準備は完了だ。

AddQuickTagにショートコードを登録する

テーマのPHPをイジり回せば毎回自動的に出せるようになるんだけど、多分コピペしてる時点でそこをイジるって状態じゃないと思う。
そこでAddQuickTagに出力用ショートコードを登録しよう。
[cft format=1]と書くとカスタムフィールドテンプレートのTEMPLATE #1に作ったフォームの内容を出力する。
自分が出力したいカスタムフィールドの番号をformat=○に入力して、タグを登録しておこう。
AddQuickTagの使い方はここでは説明しないので自力で調べてくれ。
あとは毎回カスタムフィールドを埋め、記事の頭か最後にショートコードを入力すれば、レビュー付き記事の完成だ。

PHPいじったりデザインを触るなら、WordPressは一度しっかりテキスト系読んだほうがいいかもね。
ここだけの話、ライターも記事作成に追加でWordPressちょこっとカスタムできると、仕事も単価も一気に増えるよ(こそ)

WordPress Web開発逆引きレシピ WordPress4.x/PHP7対応

WordPress Web開発逆引きレシピ WordPress4.x/PHP7対応

藤本 壱
3,024円(10/17 12:26時点)
発売日: 2016/03/16
Amazonの情報を掲載しています
ABOUT ME
わたぬき
人生脱線しっぱなしの、アラフォーのゆるいおひとりさまライター。 人生の3分の2を腐女子として熟成して過ごし、漫画もアニメもゲームも大好き。 普段はIT系の情報系コラムや記事の他、取材やインタビューを中心に地域情報やライフハックを執筆。 大人の発達障害の壁にぶつかり、人様の助けを借りながら試行錯誤の毎日。ドロップアウトしたっていいじゃない。
発達障害当事者によるゆるい発達障害話

ADHDとASDの当事者の、ストラテラ服用にまつわる色々とか、仕事の話とか、ライフハックとか。

ストラテラ関係の副作用とか効果の話

あわせて読みたい
【ADHD】ストラテラの効果と副作用の主に体重減少・増加の話注意欠陥多動性障害(ADHD)の治療薬であるストラテラ(ジェネリックはアクセプタ)。 ADHDの診断を受けた人なら、一度は聞いたことが...
あわせて読みたい
【ADHD】ストラテラ(アクセプタ)を普通の人が飲んではいけない理由ADHDの治療薬、ストラテラ(ジェネリックはアクセプタ) スマートドラッグとして個人輸入の規制対象になった。 「スマートドラッグ...
あわせて読みたい
【ADHD】ストラテラ切れると眠い!!副作用の「不眠」と「眠気」の対処法ストラテラ(アクセプタ)は事前に結構副作用の説明をされる。 飲む方も子供じゃないから自力であれこれ調べる。 しかし、しかしだ。 調...
あわせて読みたい
【ADHD】ストラテラを飲んで体感した「怒り」と「攻撃性」の変化と対処法ADHDは素のままだと基本的に怒りが持続しない人が多いらしい。 私自身、相当にキレても30分経てばストンと落ち着く。ASD優勢だけどA...

生きづらさを少しだけ楽にするライフハック

あわせて読みたい
【ADHD】生きづらさを少しだけ楽にする、ゆるゆるライフハック【発達障害】ADHD+ASDのわたぬきによる、体当たりで獲得した等身大の発達障害のための働き方とライフハック。 誰もに向いてるわけじゃないけど、片...

フリーランスになりたい発達障害者向けの話

あわせて読みたい
【ライター】名刺一枚で簡単にライターになる方法を教えるライターになるには、名刺1枚あればいい。 私はつねづね言ってるんですが、これ本当なんですよ。 なぜかと言うと、私がそうやってライター...