仕事の話

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

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

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

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

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

Simple Map

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

 <br />
有効化するときにGoogleからコード取ったりする必要があるけど、プラグインの設定ページに全部書いてある。</p>
<p><span style="font-size: 24px;"><strong><a href="https://ja.wordpress.org/plugins/custom-field-template/">Custom Field Template</a></strong></span></p>
<p>カスタムフィールドを作って、投稿ページに表示させるプラグイン。<br />
カスタムフィールドってあれこれやるのめんどくさいけど、コイツがいればHTMLの知識が少々あればすぐに作れる。</p>
<p>他にAddQuickTagとかあるといいんだけど、まあ、普通にWordPressでブログ書く人はみんなとっくに入れてるよねってことで割愛。<br />
入れてない人は入れといてね。</p>
<h2>コピペで作るショップレビュー!!<br />
カスタムフィールドテンプレートの設定方法</h2>
<p>とりあえずこんな感じの表示をするテンプレートを作るぞ。<br />
<img class="aligncenter size-full wp-image-2180" src="https://noni-no.net/wp-content/uploads/2018/07/SnapCrab_NoName_2018-7-27_17-38-26_No-00.png" alt="" width="831" height="633" />カスタムフィールドテンプレートの詳細な設定や使い方は、自力で他のブログを検索してくれ。先達がものすごく細かい紹介をしてくれてる。<br />
今回は<strong><span style="color: #ff0000;">コピペ</span></strong>のみでそれっぽい店舗紹介やレビュー表示を作るのが前提だ。<br />
ということで、↑を出すためのフィールドの内容はコレだ。<br />
<strong>カスタムフィールドテンプレートオプション</strong>を開き、<strong><span style="color: #ff0000;">コピペ</span></strong>する。</p>
<pre class="lang:default decode:true">[name]
type = text
size = 35
label = 店舗名
[address]
type = text
size = 35
label = 住所
[open]
type = text
size = 35
label = 営業時間
[closed]
type = text
size = 35
label = 休業日
[genre]
type = checkbox
value = 飲食店 # 販売店 # 公園 # 施設 # イベント # イートイン # 会社 # 宗教
default =
label = ジャンル
[shoptype]
type = text
size = 35
label = 業種
[smoking]
type = radio
value = 禁煙 # 分煙 # 喫煙可
default = 禁煙
label = 禁煙・喫煙
[dengen]
type = select
value = なし # あり(無料) # あり(有料)
default = あり(無料)
label = 電源
[wifi]
type = select
value = なし # あり(無料) # あり(有料)
default = あり(無料)
label = WiFi
[image]
type = file
mediaPicker = true
mediaRemove = true
mediaLibrary = true
label = 画像
[osusume]
type = radio
value = ★ # ★★ # ★★★ # ★★★★ # ★★★★★
default = ★★★
label = オススメ度
[limit]
type = text
size = 35
label = 予算
[impression]
type = textarea
rows = 4
cols = 40
tinyMCE = true
htmlEditor = true
mediaButton = true
label = お店の印象</pre>
<p>項目は自分の好みで変えて。<br />
今回は出力しないけど、画像も一応アップロードできるようにしておきます。<br />
そして次、出力する表示画面を作るよ。<br />
<strong>[cft] and [cftsearch] Shortcode Format</strong>を開き、<span style="color: #ff0000;"><strong>コピペ</strong></span>だ。</p>
<pre class="lang:default decode:true"><table class="shopdata" width: 100%;>
<tbody>
<tr>
<th class="shopdata">店舗名</th>
<td colspan="3">[name]</td>
<th class="shopdata">推し度</th>
<td class="shopdata">[osusume]</td>
</tr>
<tr>
<th class="shopdata">備考</th>
<td colspan="5">[impression]</td>
<tr>
<th class="shopdata">ジャンル</th>
<td class="shopdata">[shoptype][genre]</td>
<th class="shopdata">煙草</th>
<td class="shopdata">[smoking]</td>
<th class="shopdata">電源</th>
<td class="shopdata">[dengen]</td>
</tr>
<tr>
<th class="shopdata">Wi-Fi</th>
<td class="shopdata">[wifi]</td>
<th class="shopdata">営業時間</th>
<td class="shopdata">[open]/休:[closed]</td>
<th class="shopdata">価格帯</th>
<td class="shopdata">[limit]</td>
</tr>
<tr>
<th class="shopdata">場所</th>
<td colspan="5">[address]<br />[address]

</td>
</tr>
</tbody>
</table>

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

.shopdata {
	border: 1px solid #595959;
	border-collapse: collapse;
}
table.shopdata {
		width: 100%;
	}
th.shopdata {
	padding: 3px;
	width: 10%;
	background: #f0e6cc;
}
td.shopdata {
	padding: 3px;
	width: 23%;
}

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,080円(07/24 07:40時点)
Amazonの情報を掲載しています
ABOUT ME
わたぬき
人生脱線しっぱなしの、アラフォーのゆるいおひとりさまライター。 人生の3分の2を腐女子として熟成して過ごし、漫画もアニメもゲームも大好き。 普段はIT系の情報系コラムや記事の他、取材やインタビューを中心に地域情報やライフハックを執筆。 大人の発達障害の壁にぶつかり、人様の助けを借りながら試行錯誤の毎日。ドロップアウトしたっていいじゃない。
ライター向けの情報あれこれ

主に初心者WEBライター向けの、どうすれば遠回りなく、できるだけ早く、稼げるようになるのかという経験則から来る話。

収益をアップしたい初心者ライター向け

あわせて読みたい
【初心者向け】WEBライターが収入を増やすには、文字単価より時間単価を上げるべし初心者WEBライターにとって、どんな案件をこなせば収入が伸びるのか気になるところではないかと思う。 なにしろクラウドソーシングで出会う...
あわせて読みたい
【ライター】タイピング速度を向上させてライター収入をアップする方法タイピング速度って、ライターの皆さんどんくらいでしょう? ライターの単価論や収入論は、文章力や企画提案力など色んな切り口があります。 ...
あわせて読みたい
【ゆるいライター話】1500文字が15分、初心者向け速筆付箋ライティング法ライター業をやっていると忘れがちなんですが、「500文字は、普段ライティングをしない人にとってはかなりの長文」である事実。 500文字...

スキルアップするためのコツ

あわせて読みたい
【ライター】説得力がある文章を書くには「調べる力」を鍛える誰にでもわからないこと、初めてなことってありますよね。 そこであなたは「知ってる人に教えてもらう」or「Googleで調べる」…どっち...
あわせて読みたい
【ブログ】効果的な記事の見出しの作り方は新聞の見出しから盗もうブログ記事のタイトルや小見出しってすっごい困りますよね。 どうやって付けたら読んでくれるんだ?!って毎回悩む悩む。 SEO的定石はあ...

ライターとしてのキャリアを考える

あわせて読みたい
【フリーランス】初心者ライターが稼ぐために必要なのは、セミナーやサロンより名刺だどうも、家畜ライターから社畜ライターにジョブチェンジしたのに、また家畜ライターに戻ろうとしてるわたぬきです。 2年ぐらい前に書いた話に...