【Hima Art Utility】プラグインの機能の1つである、各種ショートコードの具体的な使用方法や仕様を紹介するページです。
本プラグインのショートコードは、すべてブロックパターンから呼び出すことができますので、ショートコードを覚えていただく必要はありません。
ショートコードのブロックパターンは、投稿や固定ページ編集画面からブロックの追加画面を表示し、「すべて表示」→「パターン」で以下のカテゴリーから呼び出すことができます
HAUコンテンツ追加ショートコード
ツールチップショートコード
予め設定しておいた簡易説明文を、文字列をマウスオーバーした際にポップアップ（吹き出し風）表示させる機能です。
サンプルです。こちらを→マウスオーバー説明文説明文説明文説明文説明文説明文←すると、「説明文．．」という吹き出しが表示されます。
以下のショートコードを挿入して各パラメーターを設定することで機能します。
[ha-tooltip title="タイトルを入力" text="説明を入力"]| パラメーター | 説明 |
|---|---|
| title | マウスオーバーの対象となる文字列を指定します |
| text | マウスオーバーされた時に吹き出し式のコンテンツへ表示される説明文などを指定します |
title、textパラメーターとも、brタグなどのHTMLタグは使用できません（使用すると不具合が起きて表示に支障が出ます）
ツールチップ（ポップアップ）部分の各色は、「追加コンテンツ」設定メニューから指定できます。
| 色の種類 | 色が適用される部分 | デフォルト |
|---|---|---|
| 文字色 | ポップアップ内の文字色と、対象テキストの下線色 | #222 |
| 背景色 | ポップアップの背景色 | #eee |
| 枠線色 | ポップアップの枠線と吹き出し部分の色 | #777 |
ショートコードはブロックパターンから簡単に呼び出しできます
HAUデータの出力ショートコード
カスタムフィールドの値表示ショートコード
投稿・固定ページに保存されているカスタムフィールドの値を出力します。
またパラメーターで投稿IDを指定することで、現在の投稿・固定ページ以外の情報も表示させることができます。
ショートコード
[ha-field field='' post_id='' wrap='']| パラメーター | 内容 |
|---|---|
| field | カスタムフィールド名（ID） |
| post_id | 投稿・固定ページのID ※現在の投稿・固定ページを指定する場合は空白 |
| wrap | フィールド値を出力するHTMLタグ ※未指定またはパラメーターがない場合はspanタグで囲まれます |
※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=""]ショートコードはブロックパターンから簡単に呼び出しできます
各パラメーターを指定することでいろいろな調整ができます
| パラメーター | 説明 | デフォルト |
|---|---|---|
| icon | アイコンのIDを指定します 例：の場合は「dashicons-admin-generic」と指定します | なし |
| size | アイコンのサイズをem(標準文字サイズの相対値)で指定します | 1 |
| color | アイコンの色をHex値で指定します | #222 |
| marginl | アイコンの左マージンをem(標準文字サイズの相対値)で指定します | 0 |
| marginr | アイコンの右マージンをem(標準文字サイズの相対値)で指定します | 0 |
| align | アイコンの縦位置を指定します スタイルコードのvertical-alignでの指定（top bottomなど）で指定します | middle |
ダッシュアイコンの種類や表示されるアイコンについてはこちら（公式）をご覧ください
HAUPアイコンショートコード
本プラグインに内包されているアイコンフォントを呼び出すためのショートコードです。
詳しくは以下のページを参照ください。
説明文または抜粋を表示するショートコード
SEO設定の「説明文」→「抜粋」の文章→「本文の冒頭」を優先順位として、投稿の簡易的な説明を表示します。
[ha-excerpt]HAU閲覧制限ショートコード
ログインユーザー限定表示ショートコード
ショートコード内に挿入されたブロックをログインしているユーザーだけに表示させることができるショートコードです。
以下のショートコードを挿入して使用します。
ショートコードはブロックパターンから簡単に呼び出しできます
[if-login]
ログインユーザーのみに表示するブロック
[/if-login]管理ユーザー限定表示ショートコード
ショートコード内に挿入されたブロックを管理者権限でログインしているユーザーだけに表示させることができるショートコードです。
以下のショートコードを挿入して使用します。
ショートコード
[if-admin]
管理者権限でログインしているユーザーのみに表示するブロック
[/if-admin]ショートコードはブロックパターンから簡単に呼び出しできます
モバイル限定表示ショートコード
ショートコード内に挿入されたブロックをモバイル環境で閲覧時のみ表示させることができるショートコードです。
タブレット端末はパソコンとして認識されますので、本ショートコードで囲んだコンテンツは非表示になります
以下のショートコードを挿入して使用します。
ショートコード
[ha-mobile]
モバイルのみ表示させるブロック
[/ha-mobile]ショートコードはブロックパターンから簡単に呼び出しできます
パソコン限定表示ショートコード
ショートコード内に挿入されたブロックをパソコン環境で閲覧時のみ表示させることができるショートコードです。
タブレット端末はパソコンとして認識されます
ショートコード
[ha-pc]
モバイルのみ表示させるブロック
[/ha-pc]ショートコードはブロックパターンから簡単に呼び出しできます
投稿タイプ限定表示ショートコード
特定の投稿タイプでのみショートコードで囲まれたコンテンツを表示します
ショートコード
[ha-ptype posttype=""]
特定の投稿タイプで表示するブロック
[/ha-ptype]posttypeパラメーターに適用する投稿タイプのスラグを指定します
ショートコードはブロックパターンから簡単に呼び出しできます
HAU日付時刻ショートコード
最終更新日表示ショートコード
投稿や固定ページの最終更新日を表示します。文章などの途中に入れても機能します。
使用例
編集画面の入力
最終更新日は[ha-mdate]です訪問者へ表示される内容
最終更新日はです
日付形式はサイト設定に従います
ショートコード
[ha-mdate]ショートコードはブロックパターンから簡単に呼び出しできます
公開日・更新日和暦表示ショートコード
投稿・固定ページの公開日・最終更新日を和暦を含めて表示します
本ページのタイトル下で実際に表示しています
公開日ショートコード
[p-wareki]更新日ショートコード
[m-wareki]ショートコードはブロックパターンから簡単に呼び出しできます
和暦以外の日付部分は、サイトの日付フォーマットに従った形で表示されます
年齢表示ショートコード
誕生日から現在までの経過年月数（年齢）を表示します。
没（死亡）年齢が指定されている場合は、没日と没年齢を表示します。
[ha-calculate-age birthday="" dead_day="" show_birthday="" show_months=""]以下が各パラメーターの設定内容と効果です。
| パラメーター | 説明 | 未設定の場合の値 |
|---|---|---|
| birthday | 誕生日をyyyymmddで入力します | 何も表示しません |
| dead_day | 没日をyyyymmddで入力します | 入力されていれば没日と没年齢を表示します |
| show_birthday | 「no」と指定すると誕生日を表示せず年齢のみを表示します | yes |
| show_months | 「no」と指定すると「〇カ月」を表示せず歳のみを表示します | yes |
HAUテーマ向けショートコード
ヘッダー用スライダーショートコード
CSSのみで構成した、軽量な画像スライダーです。
ゆっくりと拡大する画像を表示しながら、おおよそ6秒程度で次の画像へ移り変わっていきます。
プラグイン設定画面で3枚の画像を選択し、背景画像の高さ、全幅（画面いっぱいに表示するか）を設定した上で以下のショートコードを挿入します。
ショートコード
[ha-slide-image]ショートコードはブロックパターンから簡単に呼び出しできます
画像の高さを設定しない場合には500pxがセットされます
画像は、幅や高さを調整した上でcover(余白を埋める)処理して表示させます。サイト幅、スライダーの高さに合わせた画像をアップロードすることで、挿入した画像そのものに近い形で表示させることができます。
IEからのアクセス時にメッセージを表示する
インターネットエクスプローラーからアクセスされた際に、以下のような警告メッセージを表示します。
当サイトは一部のブラウザに対応していないため、お使いの環境ではページが正しく動作しない場合があります
mesパラメーターを指定することで、任意の文字列を表示させることができます。
ショートコード
[ha-iew mes='']ショートコードはブロックパターンから簡単に呼び出しできます
フッタークレジット表示ショートコード
フッターに、サイト名（トップページへのリンク）、サイト著作権の範囲（投稿コンテンツの日付範囲を年に直したもの）を表示します。
本ページのフッターに表示させています
ショートコード
[footer-credit textcolor="#000"]textcolorパラメーターで文字色を指定できます
ショートコードはブロックパターンから簡単に呼び出しできます
パンくずリストショートコード
任意の場所へパンくずリストを表示できます。
[ha-bread]前後のページリンクショートコード
以下のショートコードを使うことで、更新日を基準としてその投稿の前後の投稿をカード表示できます。
前の投稿
[ha-prev-post]後ろの投稿
[ha-next-post]特定の親カテゴリーを持つカテゴリーリストショートコード
特定の親カテゴリーを持つ子カテゴリーの一覧を表示します。
詳しくは以下のページを参照ください。
HAUリンク＆シェアショートコード
OGPリンクカードショートコード
外部・内部ページのOGPタグ情報を取得してリンクカードとして表示させるショートコードです。
仕様及び使用方法は以下のリンク先ページを参照ください。
複数サイト混在の新着情報を表示させるショートコード
REST APIを利用して外部や内部サイトの情報を混合させて、カードやシンプルなリストとして出力できます。
詳しくは以下のページを参照ください。
REST APIを利用した投稿一覧ショートコード
REST APIを利用して外部や内部サイトの情報を取得し、カードやシンプルなリストとして出力できます。
詳しくは以下のページを参照ください。
スクリーンショット表示ショートコード
外部・内部ページのスクリーンショットを取得し、本文内などへ表示させることができます。
仕様及び使用方法は以下のリンク先ページを参照ください。
プライバシーポリシーページへのリンク
以下のショートコードを追加することで、プライバシーポリシーページに設定した固定ページのタイトルリンクが表示できます。
[pp-link]ショートコードはブロックパターンから簡単に呼び出しできます
シェアボタンショートコード
SNSシェアボタンなどを表示させることができます
本機能の詳細については、以下のページを参照ください。
ショートコードはブロックパターンから簡単に呼び出しできます
HAUその他のショートコード
「直前に閲覧したページへ戻る」ショートコード
訪問者の閲覧履歴を利用して、サイト内で1つ前に閲覧したページへのリンクを表示します。
ショートコード
[return-page]ショートコードはブロックパターンから簡単に呼び出しできます
QRコードショートコード
パソコン表示時にモバイルでも閲覧できることを案内する文章とページURLを読み取れるQRコードを表示します
本文用ショートコード（幅広め）
[ha-qrcode]ショートコードはブロックパターンから簡単に呼び出しできます
本文用ショートコード（幅狭め）
[ha-qrcode-side]ショートコードはブロックパターンから簡単に呼び出しできます
メールアドレス・メールリンクショートコード
表示するメールアドレスの難読化
ショートコードで指定したメールアドレスをHTML上へエンコードして出力することで、ロボットなどによって収集されにくくします。
ショートコード
[ha-email mail="メールアドレス"]| パラメーター | 内容 |
|---|---|
| 表示するメールアドレス |
ショートコードはブロックパターンから簡単に呼び出しできます
ショートコード挿入後、ソースコード表示をして、メールアドレスがそのまま表示されていないことを確認ください
メール送信リンクのメールアドレス難読化
mailtoタグ（訪問者環境のメール作成フォームを起動する機能）のメールアドレスをHTML上へエンコードして出力することで、スパムボットなどから読み取られにくくします。
また、パラメーターを使って「件名」「宛先メールアドレス」を入力した形でメール作成フォームを開くことができます。
ショートコード
[ha-mail-link text="リンクの文字列" mail="メールアドレス" sub="件名"]| パラメーター | 内容 |
|---|---|
| text | リンク表示するテキスト |
| メール作成フォームに自動挿入されるメールの送信先 | |
| sub | メール作成フォームに自動挿入される件名 |
ショートコード挿入後、ソースコード表示をして、メールアドレスがそのまま表示されていないことを確認ください
テンプレート向けショートコード
主にブロックテーマのテンプレート上で使用するのに適したショートコードです。
従来のクラシックテーマでも、do_shortcode関数を使ってPHPテンプレート内で呼び出すことは可能ですが、きちんと機能するかについては確認していません
