【WordPress】ショートコードを使って記事を華やかに見せよう。

すでにWordPressの基本的な記事の書き方は説明しましたが、実はもっと多彩な書き方ができます。

ショートコードという機能を使えば、より多彩でより華やかな見た目を実現することができます。

本ブログのWordPressテーマはSANGOとその子テーマであるPORIPUを使用しています。このテーマにはかなりの数のショートコードが用意されています。

今回はSANGOに備わっているショートコードをいくつか紹介したいと思います。

ショートコードは本当に多いので上記のサイトを参考にしてください。

ショートコードの使い方

ブロックメニューから「ウィジェット」→「ショートコード」を選択します。

たったこれだけです。

するとこのような入力ブロックが現れます。

この中にショートコードを入力すればOKです。

ショートコードの例

関連記事を出力

【WordPress】数式をキレイに表示させよう。

上記の関連記事へのリンクは、ショートコードブロックの中にと入力しています。

* 実際には以下の行を[]で囲んでください。
* ここでは囲んでしまうと関連記事が表示されてしまうので、囲んでいません。
kanren id="投稿記事ID"

投稿記事IDの確認方法

記事IDはダッシュボードの記事一覧から確認することができます。

記事一覧の右側に「ID」の列があります。

カードタイプの関連記事を出力

【WordPress】数式をキレイに表示させよう。

card id = 'ここには投稿IDを入れてください'
くどいようですが、全体を[]（ブラケット）で囲んでくださいね。

他サイトへの外部リンク

sanko href="historoid.com" title="ショートコードの実例: 他サイトへの外部リンク" site="historoid.com" target="_blank"

補足説明

memo title="注意書きもできます"]読者の注意を引きたいときにはこのショートコードがおすすめです。[/memo

注意書き

alert title="さらに強い注意書き"]注意書きと言うよりも禁止事項ですね。[/alert

ソースコードを可愛らしく表示

import pandas as pd

codebox title="ここには言語やタイトルを入れましょう"]
<pre><code>
import pandas as pd
</code></pre>[/codebox

シンタックスハイライトはありませんがシンプルで見やすいですよ。

吹き出し

say name="historoid" img="ここには画像のURLを入れてください"]
吹き出しは読者の注意をひきつけます。
[/say

say name="historoid" img="ここには画像のURLを入れてください" from="right"]
吹き出しを右側に置くこともできます。
[/say

WordPressにアップロードした画像のURLの確認方法

ダッシュボードの「メディア」から確認できます。

メディアライブラリに行くと、これまでアップロードされたすべての画像を見ることができます。

URLを知りたい画像をクリックしてください。

この「リンクをコピー」の欄に画像URLが載っています。

ボックス表示

box class="box14"]こんなふうに文章を囲ってもOK[/box

box class="box21"]グラデーションにもできます[/box

box class="box26" title="タイトル"]ちょっとしたコラムにどうぞ[/box

注意したいことがあれば[/box

ブロックメニューから追加する

開発段階ですが、ブロックメニューからショートコードに相当するブロックを追加できます。

この「SANGOカスタムブロック」をクリックしてみましょう。

SANGOカスタムブロックを使う方法

ブロックメニューから「SANGOカスタムブロック」をクリック

複数あるメニューから選ぶ

このメニューは「タイムラインです」

タイムラインの追加も簡単

一番下の「+」ボタンを押せばSTEPが増えていきます。

画像の追加も思い通り

いつもどおりブロックメニューの「画像」からアップロードすればOK

以上、タイムラインを使った説明でした。

簡単に手順を書けるようになりますね。

その他

SANGOカスタムブロックにはたくさんの機能があります。

SANGOカスタムブロックから見出しを設定

上記のようにSANGOカスタムブロックから見出しを設定することも可能です。

その他の見出し

罫線を引いた見出しも設定できます。

便利ですね。もうこれで十分な感じもします。

参考

SANGOのショートコードは100種類以上あるので以下のサイトを参考にしてください。

自分の好きなデザインで記事を書けるようになると本当に楽しいですよ。

以上でショートコードの紹介を終わります。

これで自分の好きなように個性的なデザインで記事を書けるようになります。

より見やすく、そして読者を引きつけるページを作りましょう。