汎用ショートコード

テーマ概要 > 汎用ショートコード

汎用ショートコード (a5short)

本テーマでは、サイトのヘッダーや、サイトバーにメニューやビジュアルなコンテンツを組み込むために便利な汎用ショートコード「a5short] を用意しています。ワードプレスに登録するショートコードは一つだけですが、表示したい内容に応じて、別のスクリプトを読み込むため、実質的にはいくつものショートコードがあるように見えます。

固定ページや投稿記事の編集エリア又はウィジェットエリアに、「ショートコードブロック」又は「ショートコード専用ウィジェット」を組み込み、次のように記述することにより、様々なコンテンツを表示することができます。hide=1のように指定することで、一定の条件の元に、非表示にすることも出来ます。(1:ビジター,2:ログインユーザー,4:フロントページ,8:フロントページ以外)

[[a5short fn=表示したいコンテンツのコード名 hide=1]]

本テーマでは、特定の投稿のコンテンツをウィジェットの表示部品として使うことができるようにしています。このような投稿は、「ウィジェット」というカテゴリーを作成して、その中にまとめておくのが便利です。また、これらの投稿をブログホームや検索結果に含めたく無い時は、このカテゴリーを「未分類」カテゴリーの子カテゴリーにするようにして下さい。

以下は、本テーマに組み込んでいる主なコードの例です。この他にも、テーマ直下の sc/ というフォルダーにあるスクリプトから、拡張子(.php)を除いた名前が、コード名として利用できるようになっています。子テーマでカスタマイズしたい場合は、子テーマフォルダー直下に sc/ フォルダーを作成し、親テーマのファイルをコピーしてカスタマイズして下さい。新しいコードを追加することもできます。

サイトヘッダー

[a5short fn=site-header id=n] (n:記事番号)

ページヘッダーエリア内にサイト名やロゴなどからなるサイトヘッダーを表示します。投稿のid(記事番号)が指定され、当該記事番号の投稿が作成されていれば、そのコンテンツを表示し、idを指定しなかったり、まだ、投稿が作成されていない時は、サイト名だけからなるサイトヘッダーを表示します。

サイトフッター

[a5short fn=site-footer id=n] (n:記事番号)

ページフッターエリア内にサイトフッターを表示します。投稿のid(記事番号)が指定され、当該記事番号の投稿が作成されていれば、そのコンテンツを表示し、idを指定しなかったり、まだ、投稿が作成されていない時は、サイト名とコピーライトだけからなるサイトフッターを表示します。

ページトップ画像(要修正

[a5short fn=page-top-img]

ヘッダー下部に、「{ページのスラッグ名]-page-top」 というスラッグ名が付けられた画像を探して表示します。該当する名前の画像が無い時は、メニューを遡って、上位のページ用の画像が有れば、その画像を表示します。画像のスラッグ名は、アップロードした時の画像ファイル名から作成されますが、メディアライブラリで、画像を選択し、簡単に変更することができます。

この機能を使うためには、管理画面の「設定」>「パーマリンク」で、「カスタム構造」を選択し、テキスト入力フォーム内を、「/%category%/%post_id%/」又は、単に、「/%post_id%/」のようにして下さい。

スラッグ名の確認と編集を行うには、メディア一覧の表示形式をグリッドモードでは無く、リストモードにして編集を行って下さい。検索欄に「page-top」と入力して、リターンキーを押すと該当するスラッグ名を有する画像が表示されます。

フロントページ用の画像は、固定ページのスラッグ名によらず、「front-page-top」というスラッグ名が付けられた画像を表示します。ただし、サブディレクトリー形式のマルチサイトを利用している場合は、「{サブディレクトリ名]-page-top」というスラッグ名を付けておいても大丈夫です。

画像の上に、画像のタイトルや抜粋文(編集画面では、「キャプション」)を重ねて表示(オーバーレイ)したい時は、ショートコードに、「content=1」を追加し、メディアの編集画面でタイトルと抜粋文を編集して下さい。デフォルトでは画像の上部から順に、タイトルと抜粋文を白色で表示します。抜粋文は入力されていなければ表示されません。

また、表示をカスタマイズしたい時は、画像の説明の入力フォーム内にHTMLタグやスタイルをコードとして記述することができます。コード内に、「画像のURL」、「タイトル」、「抜粋文」に置き換えるための「%s」という文字列を含めるようにして下さい。(コード中に「%」を含める時は、「%%」の様に書いて下さい。)「content=1」の有無に関係なく、説明によるカスタマイズが優先されます。

次のコードは、楕円形で切り抜いた画像内にオーバーレイ表示するためのサンプルです。(このテーマのトップページのヘッダー画像)、背景や文字の色を変更したい時は、「#」に続く3桁の16進数を調整して下さい。4桁目は透明度です。

<div class="viewport-wide" style="background:#9FF;padding:50px 0;">
<div class="img-wrap" style="max-width:var(--content-width);margin:0 auto;position:relative;">
<img src="%s" />
<article class="content" style="position:absolute;inset:0;background:radial-gradient(#0002 50%%, #9FF 70%%); color:#FFF;text-align:center;padding-top:10%%;text-shadow:1px 1px 1px #00F;">
<h1>%s</h1><p>%s</p>
</article>
</div></div>

次のコードは、背景画像を右寄せにし、左側にタイトルを表示します。(このテーマのトップページ以外)
タイトルの下に抜粋を表示するには「p」タグで囲んだ「%s」を追加して下さい。

<div style="border: 1px solid #0CC; background: #69C; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 1em 1.5em;"><img style="max-height: 120px; order: 1;" src="%s" />
<article style="font: 1.2em serif; color: #fff; text-shadow: 1px 1px 1px #00F;">
<h2>%s</h2>
</article>
</div>

画像を背景画像にし、グラデーションを重ね書きしたもの。ヘッダーサンプルページ参照。

<h1 style="display: flex; align-items: center; min-height: 100px; margin:0; padding-left: 24px; color: white; text-shadow: 1px 1px 0 #000; background: radial-gradient(at 20%% 100%%, #FFF4 40%%,#99F4 50%%,#FFF0 50%%),linear-gradient(90deg,#00CC, #CCF0 75%% 95%%, #CCF9), url(%s) no-repeat right/contain;">%s</h1>

パンくずリスト(breeadcrumb)

[a5short fn=breeadcrumb]

ヘッダー下部に、サイト内の現在の表示ページ位置を示すパンくずリストを表示します。

特定の投稿コンテンツ

[a5short fn=post id=n] (n:記事番号)

投稿のid(記事番号)を指定して、特定の投稿の内容(コンテンツ)を表示します

スライダー

[a5short fn=slider]

ヘッダー下部に表示するスライダーなどを組み込むためのショートコードです。スライダータイプ、高さ、遅延、速度、コンテンツオーバーレイ、ナビゲーション(矢印又はドット表示)などの指定ができます。 デフォルトの設定は、type=basic height=56.25% delay=3000 speed=3000 content=0 navi=0 です。typeには、basic(基本:スライドインタイプ)の他にfade(フェードインタイプ)、multi(マルチスライドタイプ) が指定できます。高さは、横幅に対する割合(%)またはピクセル値(例:60% 又は 600px)を文字列で指定します。遅延及び速度は、ミリ秒(単位の記入は不要です。)で指定します。マルチスライドタイプの時は、個々のスライドの最大幅(デフォルト: maxw=700)を指定することができます。この幅により、スライドの表示枚数が決まります。

スライダーを利用するには、スライダー表示用の固定ページ(スラッグ名:slider)の作成が必要です。スライドとして利用する画像をページ内に挿入して下さい。スライドの表示順は、画像のスラッグ名を昇順にソートしています。メディアライブラリで画像を選択してスラッグ名を編集して下さい。スラッグ名の編集フォームが見つからない時は、管理画面上部の「表示オプション」を確認して下さい。スライドの上にタイトルや抜粋文(キャプション)をオーバーレイ表示したい時は、content=1 にし、メディアの編集でタイトルとキャプションを入力して下さい。

具体的な表示例については、スライダーのサンプルページをご覧ください。

カスタム画像(要修正

[a5short fn=custom-img img=表示したい画像のスラッグ名]

画像の上下に、テキストを配置したり、装飾をしたい時などに、画像の説明欄にHTMLタグやスタイルを書き込んで利用することができます。mt=1.5em(デフォルト)のように上部マージンを渡すことができます。

HTMLタグには、上部マージン用と画像URLに置き換えるための、「%s」を2つ含めるようにして下さい。(コード中に「%」を含める時は、「%%」の様に書いて下さい。)

スペーサー

[a5short fn=spacer]

縦方向のスペース(空白)を挿入します。h=24(デフォルト、単位px)のようにピクセル単位で高さを指定できます。

投稿一覧用ショートコード

説明文は準備中です。

「サンプル → テスト専用ページ → 投稿一覧サンプル」で、サンプルを確認できます。

投稿一覧・固定ページ一覧/スライドの画像サイズについて

投稿一覧及び固定ページ一覧やスライドタイプには、投稿や固定ページに付随するアイキャッチ画像を表示します。

フラットボックスタイプの一覧には、サムネイルサイズ(150×150ピクセル、縦横比固定)の画像を表示し、トールボックスタイプやスライドタイプの一覧には、ミディアムラージサイズ(768×432ピクセル)の画像を表示します。サムネイルサイズの画像はアップロードした段階でクロッピング(切抜き)されますが、ミディアムラージサイズの画像は、表示する時に、エリアをカバーするように表示スタイルの調整を行っています。

アップロードした画像の縦横比をそのままで表示したい時は、image=fullを指定して下さい。ただし、この場合はアップロードする画像のサイズをあまり大きくしないようにする必要があります。

ショートコード専用ウィジェット

本テーマでは、ウィジェットエリアにショートコードで作成するコンテンツを組み込むための、専用のウィジェット「ショートコード」を用意しています。

ウィジェットを作成する時は、後で判りやすいように、必ず、「ウィジェットのタイトル」を付けるようにして下さい。タイトルの先頭1文字を半角のエクスクラメーションマーク(ビックリマーク)「!」にしておけば、フロント画面にタイトルを表示させないようにすることができます。

最終更新日時: 2023年6月27日(火) 15:27