写真メインの持ち物リスト作るWordPressショートコード【エンジニアが解説】

どうも、スエヒロ(@basu_28)です。

先日、バックパッカーの海外旅行持ち物リスト【荷物少なめ】という記事を公開しました。持ち物を、写真メインのレイアウトで紹介した記事となっています。

この記事のような写真メインのレイアウトの作り方を解説していきます。

なお、HTMLとCSSに詳しくない方のためにショートコードを作ったので、基本はコピペでOKです。

完成イメージ

これから紹介するコードをコピペするだけで、こんな感じのレイアウトができます。

Anker PowerCore Fusion 5000
¥2,999

JOBY ゴリラポッド
¥2,430

蚊がいなくなるスプレー
¥802

nalgene 広口0.5L Tritan
¥1,728

写真にカーソルを乗せると、写真が浮かび上がります。
そして、写真をクリックすると、Amazonに飛ぶようになっています。

ショートコードを作る【コピペOK】

「functions.php」でショートコードを作り、「style.css」で見た目を整えていくイメージです。どちらもコピペでOK。

ショートコードを作る

WordPress管理画面の左のツールバーから、「外観」→「テーマの編集」と進んで、「functions.php」を開きます。

WordPressには親テーマと子テーマというものがあるのですが、子テーマの方を有効化して編集してください。
テーマ名に”child”が入っているのが子テーマです。
functions.phpの一番下(どこでもいい)に以下のコードを貼り付けてください。

貼り付けたら、左下の「ファイルを更新」をクリック。
これでショートコードの登録は完了です。

ショートコードの見た目を整える

次に「style.css」を編集することで、ショートコードで出力されるテキストのレイアウトや見た目を整えていきます。こちらもコピペでOKです。

functions.phpと同じく、子テーマの「style.css」に貼り付けてください。

はい!これでもうショートコードを使って、写真メインのレイアウトを作れる状態になりました!

ショートコードを使う

それでは実際にショートコードを使っていきましょう。

ショートコードは、普段ブログを書いている画面(ビジュアル)に貼り付けて使います。
以下のように、外枠の[stuffs][/stuffs]の中に、個々のアイテム[stuff]を入れて使います。

外枠の[stuffs][/stuffs]で囲わないと、レイアウトが崩れるので気をつけてください。

img=”Amazon画像リンク”
link=”Amazon商品ページのリンク(Amazonアソシエイトリンクも可)”
name=”商品名”
price=”値段”

を入れていってください。

レイアウトの調整

アイテムの並び数を変える

上で紹介したショートコードの設定では、横に

・PCで5つ
・スマホで2つ

アイテムが並ぶようになっています。

20%=5つ、50%=2つというわけなので、functions.phpに書いたコードのwidthを変更してあげれば、並ぶアイテム数も変えることができます。

PCで3つ並べたいなら、width:33%;といった感じです。

まとめ

ショートコードをコピペするだけで、写真メインのレイアウトを作る方法を紹介しました。

コピペでOKなので、ぜひ試してみてください!
わからないことがあれば、Twitterから質問くださいな