【2019年最新】WordPressのテンプレートSANGOでショートコードを使ってみました。

ブログについては全くの初心者で、Wordpressを始めたばかりなので、HTMLやショートコードを挿入する方法をいろいろな本を読んで実践してみたかったのですが、さっぱりわからずに、やっぱり私には無理なのかと諦めそうになりました。

これは、Wordpressが2018年12月6日にバージョンアップしたからで、このバージョンアップ後にWordpressを始めた私にとっては、変わったことすら知らず、前バージョンについて「わかりやすい」とされる本を見ながら記事を書こうとしていた私は、いきなり行き詰まります。持っている全ての本が、前バージョンのWordpressのものだったからです。

前バージョンのやり方を書いた本を見ながら、新しいバージョンでHTMLやショートコードをどこに挿入すれば良いのかさっぱりわからなかったのは当然かも知れません。なにせ、前バージョンを見たこともない超初心者ですから。お恥ずかしい。

使っているテンプレートはSANGOです。このSANGOでショートコードを使う方法を調べて試してみました。

この記事を読むと次のことがわかります。

  • HTMLを挿入する方法
  • ショートコードを挿入する方法
  • ショートコードの合わせ技を挿入する方法

まずは、箇条書きのHTMLを挿入する方法です。

SANGOで箇条書きを挿入する

箇条書きを挿入するために、上のようなHTMLを書き入れるわけですが、初めはどこに書くの?というところからスタートしました。HTMLをどこに書くかさっぱりわからなかったのです。

これは、ボックスの右側のカスタムHTMLの追加に、上のような書き方で書くだけで挿入できます。


コピペでもいいと思います。1つめの文、2つめの文、3つめの文というところが、書きたい箇条書きをかくところです。

これで箇条書きを挿入できます♪

次にショートコードで、ボックスを挿入してみます。SANGOでは、約30種類のボックスを挿入できるようです。HTMLはどうにかできたのですが、ショートコードが本当にわかりませんでした。やっとわかって、このブログを書いていますが、ここまでの道のりは険しすぎました。なにせ超初心者ですから。

SANGOカスタマイズガイドより

これでいろいろなボックスが挿入できると、初めは思ったのですが、まず迷ったのが、どうやったらいいのか?ということです。こんなボックスを挿入してみたいですよね。これは、ショートコードでできるみたいです。

SANGOカスタマイズガイドより

ガイドを読んでみますと、下のように書いてあります。

SANGOのボックス・枠を挿入する方法より

しかし、今回はエディタ内の好きなところではなく、ボックス内のここに上のようなショートコードを記載します。

ここもコピペでいいと思いますが、下のように書いてみます。

MEMO
こんなボックスを挿入できましたよ。

HTMLの箇条書きに続き、ショートコードのボックスクリアです。次に、見出しを挿入してみますね。これは、HTMLのようです。

このカスタムHTMLの追加のところに、下のようなHTMLを書きます。

上のようなステッチ風の見出しを挿入するために、下のようなHTMLをボックス内に書きます。

すると、下のような見出しができました。やったー!!

こんな見出しを挿入できましたよ。

これで、HTMLもショートコードも挿入できました。ここに、次の課題があります。それは、箇条書きボックスとショートコードの合わせ技です。初心者としては、とんでもない難問に見えます。

SANGOの箇条書きと引用のデザインより

組み合わせることもできます。って?ここでちょっと試行錯誤ですが、思うように組み合わせてみますね。

箇条書きのショートコードが下のとおりで、

SANGO箇条書きの挿入より

MEMOのボックスのショートコードが下のとおりなので、

SANGOボックスと枠を挿入より

箇条書きのコードをボックスのコードで挟み込んで、ショートコードを書くところに、下のように書いてみると、

MEMO
まずはHTMLで箇条書きとボックス
そしてショートコードで見出し
最後に箇条書きボックス

もっともっと勉強しなければなりませんが、ここまでできるようになりました。初心者を卒業する日には、自由に使いこなせているといいのですが。

私のような初心者は、ここまででもやっとです。頑張るぞ!初心者卒業まで。