安房５ミニマムテーマの概要

安房５ミニマムテーマサイト（準備中）

シンプルかつ軽快で、殆ど全てのコンテンツをブロックエディタと汎用ショートコードで作成することができるワードプレス用のテーマです。本テーマだけでも利用できますが、カスタマイズする時は、本テーマの子テーマを作成し、子テーマの方でカスタマイズを行うようにして下さい。

テンプレートファイル

本テーマでは、各ページの表示に利用される主なテンプレートとして、以下のファイルをテーマフォルダー直下に設置しています。

page.php（固定ページ）

固定ページの表示に利用されるテンプレートです。各種の目的や用途毎の固定ページを組み合わせて構築するようなサイトでは、最も多く利用されるテンプレートです。

index.php（インデックスページ）

記事の一覧を新着順に表示するようなページに利用されるテンプレートです。カテゴリー毎の記事の一覧や、検索結果の記事一覧を表示するテンプレート(category.phpや、search.php)もありますが、これらはページのタイトルをセットするだけで、中身は、index.phpをインクルードしています。

single.php（個別投稿ページ）

記事一覧に表示された個別の記事を表示するためのテンプレートです。

404.php（ロストページ）（準備中）

ページが存在しない時に使用されるテンプレートです。

page-{スラッグ名}.php

主に特殊な目的や用途のために、別途作成するようなページ用のテンプレートです。該当するスラッグ名を持つページの表示に使われます。例えば、スライダー専用のページに利用されるテンプレート（page-slider.php）などがあります。

ページの構成（ウィジェット・エリア）

本テーマを利用したページの基本的な構成は次のようになっています。

ページボディ以外のエリアは、全てウィジェットエリアであり、ウィジェットの編集画面でコンテンツを作成することができます。(ウィジェットを作成していない時は、何も表示されないか、又は、ウィジェットの作成を促すメッセージを表示します。)

ページボディは、前述した各テンプレート毎に表示する内容が異なります。

固定ページでは、ワードプレスの管理画面で編集し、作成した固定ページのコンテンツだけを表示します。個別投稿ページでは、編集されたコンテンツの上に、投稿のタイトル、下側に投稿日時及び同じカテゴリー内の前後の投稿記事へのリンクを表示します。

インデックスページでは、テーマ側で、個別投稿記事の一覧を作成し、表示します。投稿記事の一覧は、各記事毎のタイトル、投稿日時、記事本文又は記事本文の抜粋からなります。但し、抜粋表示を行うためには、記事本文の編集画面で、「続き」ブロックを挿入しておく必要があります。また、記事数がある一定の数（デフォルトで１０件：管理画面で変更可）を超えたら、記事一覧の下側に、ページネーションの表示を行います。

サイドバーは、本来（構文上）はページボディよりも下にありますが、後述するスタイルの指定によって、ページボディの左側に表示しています。本テーマでは、フロントページ（トップページ）などの特定のページで、サイドバーを表示しないようにする時は、スタイルで、サイドバーを非表示（display:none;）にしています。非表示にする方法は、他にも、フロントページ専用のテンプレートファイル（front-page.php）を用意し、サイドバーをインクルードしないようにする方法もあります。

スタイルシート

本テーマでは、以下のスタイルシートを用意し、テーマフォルダー直下に設置しています。

style.css（ワードプレスのテーマ定義ファイル）

本来のスタイルシートとしてでは無く、ワードプレスのテーマの特徴や概要などを定義するためのファイルとして使われています。子テーマのstyle.cssには、どのテーマの子テーマであるかを示す行が含まれます。（例：Template: 親テーマの名前）

parent-main.css, child-main.css （メインスタイルシート）

サイトのフロント画面の表示に利用されるメインのスタイルシートです。ページ全体のレイアウトや、メニューのレイアウトなどのスタイルを指定します。親テーマには、子テーマが存在しなくてもエラーにならないよう、両方を用意していますが、小テーマでは、child-main.cssだけが必要です。

parent-editor.css, child-editor.css （エディタスタイル）

管理画面内の記事の編集中に適用されるスタイルシートです。本テーマでは、フロント画面と同じスタイルが編集画面にも適用されるよう、フロント画面、管理画面の両方でこのスタイルシートを読み込んでいます。親テーマには、子テーマが存在しなくてもエラーにならないよう、両方を用意していますが、小テーマでは、child-editor.cssだけが必要です。

子テーマのスタイルシート

サイトのスタイルを変更したい時や、カスタマイズしたい時は、本テーマのスタイルを直接書き換えるのでは無く、本テーマを親テーマ（テンプレート：template）とする子テーマを作成し、child-main.css 及び child-editor.css のどちらか一つ、又は両方を用意し、 追加又は変更したい部分だけを記述し、上書きするようにして下さい。

ブロックエディタ

ワードプレスのバージョン５．８からは、ワードプレスに予め用意されているブロックを組み立てることにより、記事を編集できるようになっています。「見出しブロック」や、「段落ブロック」を作成し、その中に文字を入力していくだけで記事が作成できます。「画像ブロック」を作成して、画像を組み込むことも簡単にできます。

縦に複数の列を作成する「カラムブロック」や、複数の部品をまとめる「グループブロック」などを使って、高度なレイアウトにすることもできます。他にも、数多くの便利なブロックが用意されています。ワードプレスを使いこなすためには、ブロックエディタの使い方に慣れることが、とても大切なものになってきています。

クラシックブロックの活用

ワードプレスが用意したブロックを組み立てて作成することは、とても便利ですが、インライン画像や、その周りに回り込むテキストの配置などを指定したり、部分的な文字列の色を変えたりするなどの、細かい調整を必要とする場合には、不便なこともあります。

このような場合は、ブロックエディタ以前の従来のエディタのように使える「クラシックブロック」を使うことで、細かな調整を行うことができるようになる場合があります。

再利用ブロックの活用

サイト内の複数の箇所に、同じブロックを表示したい時は、作成したブロックを「再利用ブロック」として登録すれば、後でこれを選択するだけで、同じブロックを別の場所に表示することができます。このようにして表示した再利用ブロックは、どれか一つを修正、変更すれば、他のブロックにも反映されます。

再利用ブロックを選択して表示した場合でも、これを「通常のブロックに変換」すれば、個別に別のブロックとして編集することができます。詳細なスタイルの指定などを毎回繰り返すのが大変な時などは、この機能を利用し、再利用ブロックを取り出して、一部のテキストだけを変更して利用するようなことができます。

タイトル・カバー（通常のブロックに変換）

カバーブロック（見出しに最適）

この上の、タイトルカバーのサンプルのように、見出しの作成ができます。画像の上に、グラデーション用のオーバーレイを重ね、更にその上に文字列を重ねることができるようになっています。ただし、高さの調節など、微妙なスタイルのコントロールは、クラスの指定などにより、スタイルシートと連携させる必要があります。

たてやま

画像の下側だけを表示し、左から右へ白から透明になるグラデーションを付け、オレンジ色の文字列を書いています。
再利用してテキスト又は画像だけ変更して使い回すことが、できます。

汎用ショートコード (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=menu location=head theme_location=primary]

ナビゲーションメニューを表示します。locationに、head,side,footを指定すれば、各々に対応したスタイルを適用します。theme_locationにテーマで設定した名前（primary 又は secondary）を指定すると、対応するメニューを表示します。

ページトップ画像

[a5short fn=page-top-img]

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

パンくずリスト（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（フェードインタイプ） が指定できます。高さは、横幅に対する割合（％）またはピクセル値（例：600px）で指定します。遅延及び速度は、ミリ秒（単位の記入は不要です。）で指定します。

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

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

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

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

見出しスタイル

本テーマでは、H1〜H6の見出しに、スタイルシートで見栄えを追加しています。以下に、単に見出しブロックを追加しただけの見出し（左側）と「title」クラスを付与した場合の見出し（右側）を表示しています。クラスの付与は、編集画面の右側に表示されるブロック設定フォーム下部の「高度な設定」の中の「追加CSSクラス」に「title」と記入することで行います。

ダッシュアイコン

ワードプレスに元から組み込まれているダッシュアイコンを利用する方法です。スタイルシートは、フロント画面、管理画面ともに既に読み込まれているため、新たに組み込む必要はありません。 → 参考ページ

リンクをアイコンに リンクにした後、HTML編集で、dashicons-before dashicons-admin-links クラスを追加

テキストの一部をアイコンに ストロングにした後で、同じくクラス追加

• 編集画面のリストでは、アイコンが適切に表示されません。
• このような場合には、クラシックブロック内でのリストを使う方法があります（この下のブロック）。

1. クラシックでリスト
2.  ビフォーアイコン
3.  太字タグでビフォーアイコン
4. iタグでダッシュアイコン
5. どのやり方でもOKのようです。

ギャラリーブロック（サンプル）

ワードプレス組み込みのギャラリーブロックの使用例です。編集画面右側のブロック設定フォームで、リンク先を「メディアファイル」にすれば、サムネイル画像クリック時に拡大表示することができます。

単独のサムネイル画像

画像ブロックの「リンクを編集」アイコンをクリックし、リンク先を「メディアファイル」にすれば、サムネイル画像クリック時に拡大表示することができます。

左寄せ

スライダーショートコード（サンプル）

基本（スライドインタイプ）： [a5short fn=slide navi=1]

フェードインタイプ： [a5short fn=slide type=fade]

2022年4月21日(木) 11時:19分