記事の装飾って見た目のキレイさ、読みやすさを上げてくれます。
しかし、記事を書くときに装飾ってたいへんですよね。
でも、ショートコードを使えば簡単に記事の装飾ができます。
WordPressのテーマ「ストーク」では、簡単に装飾ができちゃうショートコードがありますのでご紹介します。
ショートコードの使い方
ショートコードとは、短いテキスト情報で色や囲いなどを表現できるようにしたプログラミング的なものです。
プログラミング的なものだからといって難しいわけではありません。
具体的なショートコードはこちらです。
[[box class="blue_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]
ショートコードは、記事を書くときに上記のコードをコピペし、タイトル・内容を変更するだけで使えます。
CSSを追記するなどの作業が不要です。
[aside]補足
ショートコードは、テーマ内に登録してあるものしか使用できません。使用できるショートコードは、導入しているテーマの公式サイトなどでご確認ください。
[/aside]
ボックスのショートコード一覧
最近追加された「ボックス」系のショートコードです。
「あわせて読みたい」、「あとで読む」、コードの表示などで使えるものです。
ラベルありのボックス
[box class=”blue_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[box class=”red_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[box class=”yellow_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[box class=”green_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[box class=”pink_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[box class=”glay_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[box class=”black_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
ラベルありのボックスのコピペ用ショートコード
コピペ用のショートコードです。ラベル無しのボックスも下で紹介しています。
青
[[box class="blue_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]
赤
[[box class="red_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]
黄
[[box class="yellow_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]
緑
[[box class="green_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]
ピンク
[[box class="pink_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]
グレー
[[box class="glay_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]
黒
[[box class="black_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]
ラベルなしのボックス
[box class=”blue_box”]ここにコンテンツを記載[/box]
[box class=”red_box”]ここにコンテンツを記載[/box]
[box class=”yellow_box”]ここにコンテンツを記載[/box]
[box class=”green_box”]ここにコンテンツを記載[/box]
[box class=”pink_box”]ここにコンテンツを記載[/box]
[box class=”glay_box”]ここにコンテンツを記載[/box]
[box class=”black_box”]ここにコンテンツを記載[/box]
ラベルなしのボックスののコピペ用ショートコード
コピペ用のショートコードです。
青
[[box class="blue_box"]ここにコンテンツを記載[/box]]
赤
[[box class="red_box"]ここにコンテンツを記載[/box]]
黄
[[box class="yellow_box"]ここにコンテンツを記載[/box]]
緑
[[box class="green_box"]ここにコンテンツを記載[/box]]
ピンク
[[box class="pink_box"]ここにコンテンツを記載[/box]]
グレー
[[box class="glay_box"]ここにコンテンツを記載[/box]]
黒
[[box class="black_box"]ここにコンテンツを記載[/box]]
[box class=”blue_box” title=”あわせて読みたい”]【レビュー】WordPressのテーマ「ストーク」を導入して1ヵ月、メリット・デメリットを紹介[/box]
[aside type=”warning”]注意
ショートコードがうまく表示されないなどの問題がある場合は、キャッシュを削除してみましょう
[/aside]
関連記事の表示
関連した記事を、記事内で表示したいときはこちら
単一記事の表示
[kanren postid=”438″]
[[kanren postid="438"]]
複数記事の表示
[kanren postid=”438,38″]
[[kanren postid="438,38"]]
ラベルを非表示で記事を表示する場合
[kanren2 postid=”438″]
[[kanren2 postid="248"]]
使い方の一例
ボックスを使いながらテキストでリンクを表示
[box class=”blue_box” title=”あとで読みたい”]【スマホ】キャリアのiPhone7にして後悔したこと[/box]
[[box class="blue_box" title="あわせて読みたい"] 【スマホ】キャリアのiPhone7にして後悔したこと [/box]]
ボックスを使いながら関連記事を表示
[box class=”blue_box” title=”あわせて読みたい”][kanren2 postid=”438″][/box]
[[box class="blue_box" title="あわせて読みたい"] [kanren2 postid="438"] [/box]]
公式サイト
ショートコードは、デモサイトで公開されています。
今回ご紹介したショートコードは、デモサイトを参考にいたしました。
[box class=”blue_box”]ストークのデモサイト[/box]
[box class=”blue_box” title=”あわせて読みたい”]【レビュー】WordPressのテーマ「ストーク」を導入して1ヵ月、メリット・デメリットを紹介[/box]
ストークの購入
ストークは下記リンク先から購入することができます
