【WordPress】ビジュアル重視の持ち物紹介ページを作るカスタマイズ【コピペOK】

先日、僕の全持ち物を紹介するページを作りました。

こちらがなかなか好評をいただいたんですが、

こんなページを作りたいけど、えーと、どうやってるくるの?

…みたいな声をもらったので、誰でも簡単に使えるようにカスタマイズのコードを共有します。

 

WordPressのショートコードですぐに実践できるので、気になる方は試してみるといいです。

余談ですが、この手の記事は印象が良いようで、なかなかAmazonの物販アフィリエイトを発生させることもできます。

やっぱ商品の紹介って、ペラペラとスペックを説明するより、ビジュアルが大事だったりしますからね。

スポンサーリンク

今回やりたいこと

今回の完成イメージはこちらです。

Nikon D5500
53,963円

Mac Book Pro 2015 Retina
167,535円

MyArmor セルカ棒
1,099円

TAMRONレンズ 18-200mm
24,780円

商品の写真・商品名・価格のみで構成された、シンプルな持ち物紹介のページを作ります。

PC画面では1行あたり5つの商品、スマホでは1行あたり2つの商品を並べる形です(変更できます)。

また、今回は初心者でも簡単に実践できるように、WordPressのショートコード機能を利用しました。

こちらのカスタマイズは、WordPressテーマ「STORK 」に合わせて作成しました。他のテーマでも使用可能とは思いますが、何らかの不具合が出る可能性もありますので、あらかじめご了承くださいませ。

カスタマイズ・使用方法の流れ

使用方法は簡単でして、2ステップですぐに実践できます。

1.functions.phpに記述を加える

まずはWordPress管理画面「外観」→「テーマの編集」に進みまして、「funcitons.php」の好きなところに以下の記述を追加します。

コピペしましたら、「ファイルを更新」をクリックすればOKです。

functions.phpは非常に重要なファイルでして、コピペを間違えると、ブログが開けなくなることがあります。

データが消えるわけではないので過度な心配は不要ですが、念のためバックアップを取っておくことをおすすめします。

2.ショートコードを使って記事を書く

あとは実際に記事を作る画面で、ショートコードを入力するだけです。

ショートコードitemsitemがありまして、以下のように入力していきます。

ようするに、itemsでグループを作りまして、あとはその中に好きな数だけ「item」を入れます。

その際、itemには、画像ソースのURL・アフィリエイトリンク(なくてもOK)・商品名・値段を入力します。

 

画像ソースのURLに関しては、Amazonアソシエイトの画像リンクのページに飛びまして、右クリックで「画像アドレスをコピー」して入力すればOKです。

スクリーンショット 2018 10 16 14 20 55

ここでAmazonの規約ページより、商品をダウンロードして、自分のブログにアップロードするのは違反になるようなので注意です。

 

▼実際に入力すると、このような形になります。

スポンサーリンク

個別調整

あとは細かい調整です。必要であれば、編集しましょう。

①カーソル時のcssデザイン

上のように、マウスを乗せると商品がニョキッと大きくなるデザインを加えたい人は、同じく管理画面「外観」→「テーマ編集」の「style.css」に以下を追加します。

こちら加えれば、画像にカーソルを乗せることで、持ち物が興奮してニョキニョキと大きくなります。

②商品が並ぶ数を変える

デフォルトでは、1行あたりスマホで2つ、PCで5つの商品が並ぶ仕様です。。

もし窮屈だったり、逆に広すぎたり感じる場合は、コードを少し書き換えて調節できます。

functions.phpの29行目と32行目のwidth=“xx%”「1行あたり2つならwidthを50%に、3つなら33.3%に、4つなら25%に、5つなら20%」に変更すればOK!

持ち物ページは楽しい!

僕もそうなんですが、人の持ち物ページ見るのって結構好きなんですよね。

ミニマリストしかり、ガジェット好きしかり、旅人然り…。

シンプルに自分の持ち物を紹介するページがあったら、たくさん読んでみたいです。

 

使用例として紹介もできますので、もし作ってくれたらTwitter(@okapo192)まで連絡いただけると嬉しいです。

また問題点やエラーが出ましたら、そちらも合わせて報告お願いします。

 

▼最後までありがとうございました。ブログカスタマイズ記事を他にも書いてます!

【STORK】トップページにカテゴリー切り替えタブを導入する【カスタマイズ】

2018.06.25

【WordPress】トップページでおすすめ記事を紹介するカスタマイズ

2018.07.30

【WordPress】名刺風プロフィールをサイドバーに作る方法【コピペOK】

2018.07.21

ABOUT

海外ノマド系フリーランス, ブロガー, WEBエンジニア, 24歳。フットワーク軽く生きたくて、新卒でフリーに。その後、海外35カ国を旅しながらノマドワーク。現在は1ヶ月ごとに拠点を変えつつ、旅生活を継続中です。勉強が大好きで年に3回語学留学をします。 

>>詳しいプロフィールはこちら!