ショートコードと記事パーツ

2018.05.18 2018.05.21記事作成について

ここでは、ショートコードの使い方、WordPressテーマ『HIGHLAND』に用意されている記事パーツについてご案内します。

ショートコードとは？

ショートコードとは、簡単に言えば

複雑または長ったらしいコードを書くことなく、簡単に要素を追加できるようにしたもの

です。

たとえば、WordPressテーマ『HIGHLAND』では、ブログ内の関連記事を表示するために「関連記事ボックス」を使用できるようになっています。

ウィジェットの使い方

この「関連記事ボックス」ですが、普通にHTMLで書くとソースは下記のようになります。

<div class="internal">
  <a href="https://wp-highland.site/widget/">
    <div class="internal_thumb">
      <img src="https://wp-highland.site/wp-content/uploads/2018/05/flamingo-3309628_768-180x180.png">
    </div>
    <div class="internal_desc">
      <div class="internal_label">関連記事</div>
      <p class="internal_title">ウィジェットの使い方</p>
    </div>
  </a>
</div>

関連記事を差し込むのにいちいちこれを書くのは、効率が非常に悪いですね。

ところがショートコードを使うと、下記のように書くだけで関連記事リンクを挿入できてしまいます。

[internal slug=widget]

このように、ショートコードは非常に便利な機能です。

是非活用してみてください。

ここで紹介するショートコードは、WordPressテーマ『HIGHLAND』でのみ利用可能なものです。他のテーマでは動作しませんのでご注意ください。

記事パーツのご紹介

WordPressテーマ『HIGHLAND』では、記事を装飾するためにいろいろな「記事パーツ」をご用意しています。

一部のパーツはショートコードを利用することで、簡単に設置できるようになっています。

また、AddQuicktagを使えば、すべてのパーツがクイックタグにて挿入可能です。

HIGHLANDでAddQuicktagを利用するには、専用の設定ファイルが必要になります。

下記のページからダウンロードしてご利用ください。

AddQuicktagについて

クイックタグの使い方はこちらでご確認ください。

エディターの使い方

ここでご紹介する記事パーツは、「記事設定」にてカラーの設定ができます。

記事設定

クイックタグで挿入されるソースコードについて

クイックタグで挿入されるソースコードは、パーツによってHTMLタグだったりショートコードだったりします。

これはWordPressの自動整形機能による表示崩れをできるだけ回避するためです。

WordPressには、自動で改行タグや段落タグを挿入する「自動整形」という機能があります。

基本的には便利なこの自動整形機能ですが、spanタグなどのインライン要素をブロック要素で囲わないと、勝手にpタグで囲んでしまいます。

そのため、ショートコードとして登録されているタグがインライン要素の場合、この自動整形機能によって表示が崩れてしまう場合があります。

その他にも、「挿入される要素に、さらにクラス名を付加したい」などの要望が予想されるものについては、ショートコードではなくHTMLタグが挿入されるようになっています。

見出し

記事内で使える見出しタグはh2～h6タグです。すべての見出しでショートコードが使えます。

h2見出し

[h2]H2 - HEADLINE[/h2]

h3見出し

[h3]H2 - HEADLINE[/h3]

h4見出し

[h4]H4 - HEADLINE[/h4]

h5見出し

[h5]H5 - HEADLINE[/h5]

h6見出し

[h6]H6 - HEADLINE[/h6]

クイックタグも利用できます。

記事内関連リンク

WordPressの基本設定

ブログ内の記事へのリンクをサムネイル付きで表示できます。

リンク先の記事の指定は、記事IDまたはスラッグにて可能です。

記事IDで指定

[internal id=4726]

記事スラッグで指定

[internal slug=wp-setting]

クイックタグも利用できます。

ボタン

ショートコードでボタンを挿入できます。

ボタンは、リンク先ページを同じタブで開くか別のタブで開くか選択できます。

リンク先を同じタブで開くショートコードの例

[btn url="https://wp-highland.site/" text="ボタンテキスト" width="500px"]

リンク先を別タブで開くショートコードの例

[btn url="https://wp-highland.site/" target="_blank" text="ボタンテキスト" width="500px"]

クイックタグも利用できます。

ボタンの横幅(width)について

ショートコードにて、ボタンの横幅(width)を指定できます。テーマCSSの方に最大幅(max-width)を設定していますので、ショートコードで指定した値が最大幅を超える場合には、最大幅の方が適用されます。

文字強調

文章の中の重要な箇所を目立つようにできます。

黄色強調

背景黄色＋太字で強調します。

<span class="yellow">背景黄色＋太字で強調します。</span>

赤字

赤字＋太字で強調します。

<span class="red">赤字＋太字で強調します。</span>

太字

太字で強調します。

<span class="black">太字で強調します。</span>

クイックタグを利用できます。

定義リスト

定義リストのタイトル: 定義リストの本文が入ります。定義リストの本文が入ります。定義リストの本文が入ります。定義リストの本文が入ります。定義リストの本文が入ります。定義リストの本文が入ります。定義リストの本文が入ります。定義リストの本文が入ります。

<dl>
  <dt>定義リストのタイトル</dt>
  <dd>定義リストの本文</dd>
</dl>

クイックタグを利用できます。

補足説明

本文に出てくる内容について詳しく説明したいとき、話の本筋とはあまり関係ないが伝えておきたい内容などのときに使ってみてください。

ショートコードの記述例

[notes]
[black]補足説明[/black]
本文に出てくる内容について詳しく説明したいとき、話の本筋とはあまり関係ないが伝えておきたい内容などのときに使ってみてください。
[/notes]

クイックタグも利用できます。

注意書き

普通の補足説明では足りないくらい注意してほしい内容を伝えるときなどに使ってみてください。

ショートコードの記述例

[caution]
[black]注意書き[/black]
普通の補足説明では足りないくらい注意してほしい内容を伝えるときなどに使ってみてください。
[/caution]

吹き出し

セリフ調のテキストや心の中のボヤキ的なモノのときにでも使ってみてください。

ショートコードの記述例

[balloon]
セリフ調のテキストや心の中のボヤキ的なモノのときにでも使ってみてください。
[/balloon]

クイックタグも利用できます。

引用

書籍や他のサイトからの引用はblockquoteタグで囲みましょう。

ショートコードの記述例

[blockquote]
セリフ調のテキストや心の中のボヤキ的なモノのときにでも使ってみてください。
[/blockquote]

クイックタグも利用できます

注釈

注釈を入れたい場合に使ってみてください。

※注釈を入れたい場合に使ってみてください。注釈を入れたい場合に使ってみてください。注釈を入れたい場合に使ってみてください。注釈を入れたい場合に使ってみてください。注釈を入れたい場合に使ってみてください。注釈を入れたい場合に使ってみてください。

ショートコードの記述例

[kome]
※注釈を入れたい場合に使ってみてください。
[/kome]

注釈の中に複数の段落を入れたい場合は、下記のように記述します。

[kome]
※注釈を入れたい場合に使ってみてください。

※注釈を入れたい場合に使ってみてください。
[/kome]

■表示サンプル

※注釈を入れたい場合に使ってみてください。

クイックタグも利用できます。

表(テーブル)

表はA・B・Cの3タイプをご用意しています。

Aタイプ

項目名	ここに説明文を入力してください。
項目名	ここに説明文を入力してください。
項目名	ここに説明文を入力してください。

[tableA]
[tr]
[th]見出しセル[/th]
[td]通常のセル[/td]
[/tr]
[/tableA]

Bタイプ

項目名	ここに説明文を入力してください。
項目名	ここに説明文を入力してください。
項目名	ここに説明文を入力してください。

[tableB]
[tr]
[th]見出しセル[/th]
[td]通常のセル[/td]
[/tr]
[/tableB]

Cタイプ

項目名	ここに説明文を入力してください。
項目名	ここに説明文を入力してください。
項目名	ここに説明文を入力してください。

[tableC]
[tr]
[th]見出しセル[/th]
[td]通常のセル[/td]
[/tr]
[/tableC]

クイックタグも利用できます。

段組みレイアウト

記事内に2～4カラムの段組みレイアウトを簡単に組み込めます。

定義リストのタイトル

2カラムのコンテンツの表示例です。

スマホ表示のときは1カラムになります。

[column]
[column2]2カラムのコンテンツ[/column2]
[column2]2カラムのコンテンツ[/column2]
[/column]

クイックタグも利用できます。

クイックタグではHTMLタグが挿入されます。

<div class="column">
  <div class="column2 nest">2カラムのコンテンツ</div>
  <div class="column2 nest">2カラムのコンテンツ</div>
</div>

3カラム

3カラムのコンテンツの表示例です。

PC・タブレット表示のときは3カラムになります。

スマホ表示のときは1カラムになります。

[column]
[column3]3カラムのコンテンツ[/column3]
[column3]3カラムのコンテンツ[/column3]
[column3]3カラムのコンテンツ[/column3]
[/column]

クイックタグも利用できます。

クイックタグではHTMLタグが挿入されます。

<div class="column">
  <div class="column3 nest">3カラムのコンテンツ</div>
  <div class="column3 nest">3カラムのコンテンツ</div>
  <div class="column3 nest">3カラムのコンテンツ</div>
</div>

4カラム

4カラムのコンテンツの表示例です。

PC表示では4カラムになります。

タブレット表示でも4カラムになります。

スマホ表示のとき、ついに1カラムになります。

[column]
[column4]4カラムのコンテンツ[/column4]
[column4]4カラムのコンテンツ[/column4]
[column4]4カラムのコンテンツ[/column4]
[column4]4カラムのコンテンツ[/column4]
[/column]

クイックタグも利用できます。

クイックタグではHTMLタグが挿入されます。

<div class="column">
<div class="column4 nest">4カラムのコンテンツ</div>
<div class="column4 nest">4カラムのコンテンツ</div>
<div class="column4 nest">4カラムのコンテンツ</div>
<div class="column4 nest">4カラムのコンテンツ</div>
</div>

Youtube埋め込み

Youtubeの動画をレスポンシブで埋め込むためのパーツです。

[youtube]<iframe width="560" height="315" src="https://www.youtube.com/embed/cLyUcAUMmMY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>[/youtube]

クイックタグも利用できます。

水平線

こんな感じ↓の水平線が引けます。

[hr]

クイックタグも利用できます。

フロー

ボックスと矢印を組み合わせたブロックです。申し込み・購入の流れなど、何かの手順を説明するときなどに使ってみてください。

1. フローのタイトル

フローの本文

2. フローのタイトル

フローの本文

3. フローのタイトル

フローの本文

[flow_box]
[flow_head]1. フロー見出し[/flow_head]
[flow_body]フロー本文[/flow_body]
[flow_head]2. フロー見出し[/flow_head]
[flow_body]フロー本文[/flow_body]
[flow_head]3. フロー見出し[/flow_head]
[flow_body]フロー本文[/flow_body]
[/flow_box]

クイックタグも利用できます。

クイックタグではHTMLタグが挿入されます。

<div class="flow_container">
  <div class="flow_box">
    <div class="flow_head">フローのタイトル</div>
    <div class="flow_body">フローの本文</div>
  </div>
  <div class="flow_box">
    <div class="flow_head">フローのタイトル</div>
    <div class="flow_body">フローの本文</div>
  </div>
  <div class="flow_box">
    <div class="flow_head">フローのタイトル</div>
    <div class="flow_body">フローの本文</div>
  </div>
</div>

テキスト広告

ブログのPVが伸びてくると、テキスト広告の掲載依頼が来たりします。そういうときにはこちらを使ってみてください。

[text_ads]
ブログのPVが伸びてくると、テキスト広告の掲載依頼が来たりします。そういうときにはこちらを使ってみてください。
[/text_ads]

テキスト広告はウィジェットに設置することができます(ショートコードも使えます)。

「テキスト」または「カスタムHTML」ウィジェットを利用し「記事下部広告」エリアなどに設置しておくことで、すべての記事に表示させることができます。

ウィジェットの使い方

コンテンツエリアのウィジェット設定

特定の記事で広告を表示させない方法

広告を表示させたくない記事で、投稿編集画面の「フォーマット」で広告なしレイアウトを選択すれば非表示になります。

Amazon商品リンク

Amazonアソシエイトで取得した商品コードを貼り付けるためのパーツです。

が、Amazonアソシエイトの商品リンクは見栄えがよくないので、できればカエレバやWordPressプラグインのAmazon JSなどを利用しましょう。

カエレバの使い方

Amazon JSの使い方

クイックタグも利用できます。

クイックタグではHTMLタグが挿入されます。

<div class="amazon">ここにAmazonアソシエイトで取得した商品リンクを貼り付けてください。</div>

PayPal決済ボタン

PayPalの決済ボタンを中央に寄せるためだけのパーツです。

「いらないかな？」と思いましたが、せっかく作ったので入れておきます。

[paypal]ここにPayPal決済ボタンのソースコードを貼り付けます。[/paypal]

クイックタグも利用できます。

クイックタグではHTMLタグが挿入されます。

<div class="btn_paypal">ここにPayPal決済ボタンのソースコードを貼り付けてください。</div>

HIGHLANDをダウンロード

今すぐダウンロード

Follow @bambooooooo0116

この記事を気に入ったら
いいね！&フォローしよう最新情報をお届けします

柴田竹思

WordPress案件を得意とするWebクリエイター。ベトナム在住。大手企業や教育機関などの大規模制作案件、フリーランス・個人事業主のスタートアップから売上を伸ばしていくお手伝いなど、わりと幅広くWeb関連の仕事をしています。

記事投稿の流れ

エディターの使い方