各種ショートコードの使い方

アコーディオンショートコード

投稿や固定ページ本文内へ開閉式のコンテンツを表示させることができます。

本機能についての詳細は、以下のページを参照ください。

ショートコードはブロックパターンから簡単に呼び出しできます

ツールチップショートコード

予め設定しておいた簡易説明文を、文字列をマウスオーバーした際にポップアップ（吹き出し風）表示させる機能です。

サンプルです。こちらを→マウスオーバー説明文説明文説明文説明文説明文説明文←すると、「説明文．．」という吹き出しが表示されます。

以下のショートコードを挿入して各パラメーターを設定することで機能します。

[ha-tooltip title="タイトルを入力" text="説明を入力"]

title、textパラメーターとも、brタグなどのHTMLタグは使用できません（使用すると不具合が起きて表示に支障が出ます）

ツールチップ（ポップアップ）部分の各色は、「追加コンテンツ」設定メニューから指定できます。

ショートコードはブロックパターンから簡単に呼び出しできます

カスタムフィールドの値表示ショートコード

投稿・固定ページに保存されているカスタムフィールドの値を出力します。

またパラメーターで投稿IDを指定することで、現在の投稿・固定ページ以外の情報も表示させることができます。

ショートコード

[ha-field field='' post_id='' wrap='']

※wrapパラメーターは、バージョン2.1以降で使用可能です

ショートコードはブロックパターンから簡単に呼び出しできます

CFS(Custom Field Suite)プラグインのループフィールドをリスト出力するショートコード

CFS(Custom Field Suite)プラグインで作成したループ（繰り返し）フィールドの値を、リスト形式で出力できます。

[ha-cfsre-sc group="グループ名" field="フィールド名"]

• グループ名パラメーターには、ループにしたフィールドの名前を入力します
• フィールド名パラメーターには、ループ内に内包したフィールドの名前を入力します

1つのグループ内に1つのフィールド設定がある場合のみ動作確認しています

※このショートコードは、バージョン2.1以降で使用可能です

ショートコードはブロックパターンから簡単に呼び出しできます

再利用ブロック表示ショートコード

再利用ブロックのIDを指定して、特定の再利用ブロックを表示できます。

ショートコード

[ha-reuse-sc id=""]

IDパラメーターに再利用ブロックのIDを指定します

ショートコードはブロックパターンから簡単に呼び出しできます

ダッシュアイコン表示ショートコード

WordPressの管理画面で標準的に使用されているダッシュアイコンを、ショートコードを使って表示画面でも表示できるようにします。

ショートコード

[dicon icon="" size="" color="" marginl="" marginr="" align=""]

ショートコードはブロックパターンから簡単に呼び出しできます

各パラメーターを指定することでいろいろな調整ができます

ダッシュアイコンの種類や表示されるアイコンについてはこちら（公式）をご覧ください

HAUPアイコンショートコード

本プラグインに内包されているアイコンフォントを呼び出すためのショートコードです。

詳しくは以下のページを参照ください。

説明文または抜粋を表示するショートコード

SEO設定の「説明文」→「抜粋」の文章→「本文の冒頭」を優先順位として、投稿の簡易的な説明を表示します。

[ha-excerpt]

ログインユーザー限定表示ショートコード

ショートコード内に挿入されたブロックをログインしているユーザーだけに表示させることができるショートコードです。

以下のショートコードを挿入して使用します。

ショートコードはブロックパターンから簡単に呼び出しできます

[if-login]
ログインユーザーのみに表示するブロック
[/if-login]

管理ユーザー限定表示ショートコード

ショートコード内に挿入されたブロックを管理者権限でログインしているユーザーだけに表示させることができるショートコードです。

以下のショートコードを挿入して使用します。

ショートコード

[if-admin]
管理者権限でログインしているユーザーのみに表示するブロック
[/if-admin]

ショートコードはブロックパターンから簡単に呼び出しできます

モバイル限定表示ショートコード

ショートコード内に挿入されたブロックをモバイル環境で閲覧時のみ表示させることができるショートコードです。

タブレット端末はパソコンとして認識されますので、本ショートコードで囲んだコンテンツは非表示になります

以下のショートコードを挿入して使用します。

ショートコード

[ha-mobile]
モバイルのみ表示させるブロック
[/ha-mobile]

ショートコードはブロックパターンから簡単に呼び出しできます

パソコン限定表示ショートコード

ショートコード内に挿入されたブロックをパソコン環境で閲覧時のみ表示させることができるショートコードです。

タブレット端末はパソコンとして認識されます

ショートコード

[ha-pc]
モバイルのみ表示させるブロック
[/ha-pc]

ショートコードはブロックパターンから簡単に呼び出しできます

投稿タイプ限定表示ショートコード

特定の投稿タイプでのみショートコードで囲まれたコンテンツを表示します

ショートコード

[ha-ptype posttype=""]
特定の投稿タイプで表示するブロック
[/ha-ptype]

posttypeパラメーターに適用する投稿タイプのスラグを指定します

ショートコードはブロックパターンから簡単に呼び出しできます

最終更新日表示ショートコード

投稿や固定ページの最終更新日を表示します。文章などの途中に入れても機能します。

使用例

最終更新日は[ha-mdate]です

日付形式はサイト設定に従います

ショートコード

[ha-mdate]

ショートコードはブロックパターンから簡単に呼び出しできます

公開日・更新日和暦表示ショートコード

投稿・固定ページの公開日・最終更新日を和暦を含めて表示します

本ページのタイトル下で実際に表示しています

公開日ショートコード

[p-wareki]

更新日ショートコード

[m-wareki]

ショートコードはブロックパターンから簡単に呼び出しできます

和暦以外の日付部分は、サイトの日付フォーマットに従った形で表示されます

ヘッダー用スライダーショートコード

CSSのみで構成した、軽量な画像スライダーです。

ゆっくりと拡大する画像を表示しながら、おおよそ6秒程度で次の画像へ移り変わっていきます。

プラグイン設定画面で3枚の画像を選択し、背景画像の高さ、全幅（画面いっぱいに表示するか）を設定した上で以下のショートコードを挿入します。

ショートコード

[ha-slide-image]

ショートコードはブロックパターンから簡単に呼び出しできます

画像の高さを設定しない場合には500pxがセットされます

画像は、幅や高さを調整した上でcover(余白を埋める)処理して表示させます。サイト幅、スライダーの高さに合わせた画像をアップロードすることで、挿入した画像そのものに近い形で表示させることができます。

IEからのアクセス時にメッセージを表示する

インターネットエクスプローラーからアクセスされた際に、以下のような警告メッセージを表示します。

当サイトは一部のブラウザに対応していないため、お使いの環境ではページが正しく動作しない場合があります

mesパラメーターを指定することで、任意の文字列を表示させることができます。

ショートコード

[ha-iew mes='']

ショートコードはブロックパターンから簡単に呼び出しできます

フッタークレジット表示ショートコード

フッターに、サイト名（トップページへのリンク）、サイト著作権の範囲（投稿コンテンツの日付範囲を年に直したもの）を表示します。

本ページのフッターに表示させています

ショートコード

[footer-credit textcolor="#000"]

textcolorパラメーターで文字色を指定できます

ショートコードはブロックパターンから簡単に呼び出しできます

パンくずリストショートコード

任意の場所へパンくずリストを表示できます。

[ha-bread]

OGPリンクカードショートコード

外部・内部ページのOGPタグ情報を取得してリンクカードとして表示させるショートコードです。

仕様及び使用方法は以下のリンク先ページを参照ください。

関連投稿ショートコード

同一カテゴリーの投稿の中から、ランダムに設定した件数だけカード形式で表示するショートコードです。

以下のショートコードを個別投稿用のテンプレート内へ挿入することで機能します。

表示数は、プラグインの設定画面から行います

本ページ末尾に、このショートコードを使った関連投稿を2列表示させています

ショートコードはブロックパターンから簡単に呼び出しできます

1列表示の場合

[ha-related-posts]

標準の表示数は5件です

2列表示の場合

[ha-related-posts-double]

標準の表示数は4件です

設定画面から以下の色を指定できます。

スクリーンショット表示ショートコード

外部・内部ページのスクリーンショットを取得し、本文内などへ表示させることができます。

仕様及び使用方法は以下のリンク先ページを参照ください。

プライバシーポリシーページへのリンク

以下のショートコードを追加することで、プライバシーポリシーページに設定した固定ページのタイトルリンクが表示できます。

[pp-link]

ショートコードはブロックパターンから簡単に呼び出しできます

シェアボタンショートコード

SNSシェアボタンなどを表示させることができます

本機能の詳細については、以下のページを参照ください。

ショートコードはブロックパターンから簡単に呼び出しできます

「直前に閲覧したページへ戻る」ショートコード

訪問者の閲覧履歴を利用して、サイト内で1つ前に閲覧したページへのリンクを表示します。

ショートコード

[return-page]

ショートコードはブロックパターンから簡単に呼び出しできます

QRコードショートコード

パソコン表示時にモバイルでも閲覧できることを案内する文章とページURLを読み取れるQRコードを表示します

本文用ショートコード（幅広め）

[ha-qrcode]

ショートコードはブロックパターンから簡単に呼び出しできます

本文用ショートコード（幅狭め）

[ha-qrcode-side]

ショートコードはブロックパターンから簡単に呼び出しできます

メールアドレス・メールリンクショートコード

表示するメールアドレスの難読化

ショートコードで指定したメールアドレスをHTML上へエンコードして出力することで、ロボットなどによって収集されにくくします。

ショートコード

[ha-email mail="メールアドレス"]

ショートコードはブロックパターンから簡単に呼び出しできます

ショートコード挿入後、ソースコード表示をして、メールアドレスがそのまま表示されていないことを確認ください

メール送信リンクのメールアドレス難読化

mailtoタグ（訪問者環境のメール作成フォームを起動する機能）のメールアドレスをHTML上へエンコードして出力することで、スパムボットなどから読み取られにくくします。

また、パラメーターを使って「件名」「宛先メールアドレス」を入力した形でメール作成フォームを開くことができます。

ショートコード

[ha-mail-link text="リンクの文字列" mail="メールアドレス" sub="件名"]

ショートコード挿入後、ソースコード表示をして、メールアドレスがそのまま表示されていないことを確認ください

テンプレート向けショートコード

主にブロックテーマのテンプレート上で使用するのに適したショートコードです。

従来のクラシックテーマでも、do_shortcode関数を使ってPHPテンプレート内で呼び出すことは可能ですが、きちんと機能するかについては確認していません