すでにWordPressの基本的な記事の書き方は説明しましたが、実はもっと多彩な書き方ができます。
ショートコードという機能を使えば、より多彩でより華やかな見た目を実現することができます。
本ブログのWordPressテーマはSANGOとその子テーマであるPORIPUを使用しています。このテーマにはかなりの数のショートコードが用意されています。
今回はSANGOに備わっているショートコードをいくつか紹介したいと思います。
ショートコードは本当に多いので上記のサイトを参考にしてください。
ショートコードの使い方
ブロックメニューから「ウィジェット」→「ショートコード」を選択します。
たったこれだけです。
するとこのような入力ブロックが現れます。
この中にショートコードを入力すればOKです。
ショートコードの例
関連記事を出力
【WordPress】数式をキレイに表示させよう。
上記の関連記事へのリンクは、ショートコードブロックの中にと入力しています。
* 実際には以下の行を[]で囲んでください。
* ここでは囲んでしまうと関連記事が表示されてしまうので、囲んでいません。
kanren id="投稿記事ID"投稿記事IDの確認方法
記事IDはダッシュボードの記事一覧から確認することができます。
記事一覧の右側に「ID」の列があります。
カードタイプの関連記事を出力
【WordPress】数式をキレイに表示させよう。
card id = 'ここには投稿IDを入れてください'
くどいようですが、全体を[]（ブラケット）で囲んでくださいね。他サイトへの外部リンク
参考 ショートコードの実例: 他サイトへの外部リンクhistoroid.comsanko href="historoid.com" title="ショートコードの実例: 他サイトへの外部リンク" site="historoid.com" target="_blank"補足説明
memo title="注意書きもできます"]読者の注意を引きたいときにはこのショートコードがおすすめです。[/memo注意書き
alert title="さらに強い注意書き"]注意書きと言うよりも禁止事項ですね。[/alertソースコードを可愛らしく表示
import pandas as pdcodebox title="ここには言語やタイトルを入れましょう"]
<pre><code>
import pandas as pd
</code></pre>[/codeboxシンタックスハイライトはありませんがシンプルで見やすいですよ。
吹き出し
historoid
say name="historoid" img="ここには画像のURLを入れてください"]
吹き出しは読者の注意をひきつけます。
[/sayhistoroid
say name="historoid" img="ここには画像のURLを入れてください" from="right"]
吹き出しを右側に置くこともできます。
[/sayWordPressにアップロードした画像のURLの確認方法
ダッシュボードの「メディア」から確認できます。
メディアライブラリに行くと、これまでアップロードされたすべての画像を見ることができます。
URLを知りたい画像をクリックしてください。
この「リンクをコピー」の欄に画像URLが載っています。
ボックス表示
box class="box14"]こんなふうに文章を囲ってもOK[/boxbox class="box21"]グラデーションにもできます[/boxbox class="box26" title="タイトル"]ちょっとしたコラムにどうぞ[/box注意したいことがあれば[/boxブロックメニューから追加する
開発段階ですが、ブロックメニューからショートコードに相当するブロックを追加できます。
この「SANGOカスタムブロック」をクリックしてみましょう。
ブロックメニューから「SANGOカスタムブロック」をクリック
このメニューは「タイムラインです」
一番下の「+」ボタンを押せばSTEPが増えていきます。
いつもどおりブロックメニューの「画像」からアップロードすればOK
簡単に手順を書けるようになりますね。
その他
SANGOカスタムブロックにはたくさんの機能があります。
SANGOカスタムブロックの「ボックス」を選択しました。
同じボックスでも好きな色に変更できます。
上記のようにSANGOカスタムブロックから見出しを設定することも可能です。
罫線を引いた見出しも設定できます。
便利ですね。もうこれで十分な感じもします。
参考
SANGOのショートコードは100種類以上あるので以下のサイトを参考にしてください。
自分の好きなデザインで記事を書けるようになると本当に楽しいですよ。
以上でショートコードの紹介を終わります。
これで自分の好きなように個性的なデザインで記事を書けるようになります。
より見やすく、そして読者を引きつけるページを作りましょう。
