安房5ミニマムテーマ

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

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

テンプレートファイル

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

page.php(固定ページ)

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

index.php(インデックスページ)

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

single.php(個別投稿ページ)

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

404.php(ロストページ)(準備中

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

page-{スラッグ名}.php

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

共用部品テンプレート

上述した各種テンプレートで共通して利用される部品テンプレートは、テーマのトップフォルダー内のインクルードフォルダー(inc/)おいてあります。共通ヘッダー、フッター、サイドバー用テンプレートもこのフォルダーにあります。(ワードプレス本来の配置とは異なっています。)

共用部品テンプレートや後述する汎用ショートコードのカスタマイズを行う場合は、子テーマ内に同名のフォルダーを設置し、同名のファイルを作成して、カスタマイズを行って下さい。本テーマは、子テーマ内の同名ファイルを優先して読み込みます。

ページの構成(ウィジェット・エリア)

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

ヘッダー上部ウィジェットエリア
ヘッド・メニュー
ヘッダー下部ウィジェットエリア
サイドバー上部ウィジェットエリア
サイド・メニュー
サイドバー下部ウィジェットエリア
ページボディ
フット・メニュー
フッター下部ウィジェットエリア

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

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

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

サイドバーの表示/非表示(要修正

add_filter で、no-sidebarを付与するしか無い

サイドバーは、本来(構文上)はページボディよりも下にありますが、後述するスタイルの指定によって、ページボディの左側に表示しています。

サイドバーが無いページを表示したい時は、固定ページの場合は、編集画面右側の設定で、ページテンプレート「ワイドページ(サイドバー無し)」が選択できるようにしてあります。

固定ページ以外の時は、スタイルを指定する必要があります。子テーマ用のスタイルシート、又は小テーマの管理画面の「外観」>「カスタマイズ」>「追加CSS」に、次のように記述して下さい。シングルサイトの場合は、テーマエディタを利用してスタイルシートの編集ができます。(マルチサイトの場合は、特権管理者の権限が必要になります。)

フロントページ及びブログホームページだけ、サイドバーを表示しないようにしたい時(画面幅の数値は自サイトの設定に合わせて下さい。):

@media (min-width:940px) {
    body.home #page-sidebar{display:none;}
    body.home #page-body-wrapper{display:block;}
}

全てのページで、サイドバーを表示しないようにしたい時:

@media (min-width:941px) {
    #page-sidebar{display:none;}
    #page-body-wrapper{display:block;}
}

サイドバーを右側に表示したい時は、次のように記述して下さい。

#page-body{order:0;}

フロントページ専用のテンプレート(front-page.php)や、ブログホーム専用のテンプレート(home.php)は、本テーマでは用意していません。必要に応じて子テーマの方で作成し、カスタマイズして下さい。(フロントページは、固定ページ、ブログホームは、インデックスページのファイルの内容をコピーすれば、カスタマイズが容易になります。)

スタイルシート

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

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

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

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

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

parent-editor.css, child-editor.css (エディタスタイル)

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

parent-slide.css, child-slide.css (投稿・ページスライドスタイル)

投稿スライダー及びページスライダーのスタイルのカスタマイズ用です。子テーマ用のchild-slide.cssを作成し、カスタマイズして下さい。

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

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

ブロックエディタ

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

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

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

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

ワードプレスのブロックエディタには、定義リスト(DL, DT, DD)を作成するためブロックが無く、カスタムHTMLブロックを利用して、HTMLタグ入力をしなくてはなりません。クラシックエディタを利用すれば、最初の1行だけタグ入力すれば、後はビジュアルに編集可能です。インデント機能を使えば、DTをDDに変換することができ、その逆も可能です。

用語(DT:ターム)
説明(DD:デスクリプション)
用語(DT:ターム)
説明(DD:デスクリプション)

DLに「compact」クラスを付与し、スタイルを指定した例(サンプル)

用語(DT:ターム)
説明(DD:デスクリプション)
用語(DT:ターム)
説明(DD:デスクリプション)
シフト+改行で、説明の2行目
2つ目の説明(DD:デスクリプション)
用語(DT:ターム)
説明(DD:デスクリプション)

再利用ブロックの活用

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

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

タイトル・カバー(再利用ブロックに登録)


タイトル・カバー(再利用ブロックを利用し、通常のブロックに変換)

カバーブロック(見出しに最適)

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

ワードプレスデフォルトでは、カバーのパディングや段落のマージンのため、最小の高さが126px前後より低くすることができません。本テーマでは、カバーブロックに「title」というクラスを付与することで、この制限が無くなるようにしています。

たてやま

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

テーブルブロック

見出しと説明の2列だけからなるテーブル:「columns-2」クラス付与で、モバイル時は1列になります。

行1列1行1列2
行2列1行2列2

3列以上のテーブル:「scroll-x」クラス付与で、モバイル時は横にスクロール表示します。

行1列1行1列23列目
行2列1行2列23列目

ブロックエディタのテーブル(表組み)機能では、シンプルな表しか作成できません。セルの結合など、高度な表組みを行うには、クラシックブロックを利用し、エクセル等の外部のツールで作成した表を貼り付けることが必要です。

標準で用意されているクラシックブロックには、新たにテーブルを作成する機能はありません。テーブルを作成したり、高度な表組みを行うためには、それらの機能を有するプラグインの利用が必要です。

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

(別ページにリンクしています。)

見出しスタイル

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

H1:通常の見出し

titleクラス付与

H2:通常の見出し

titleクラス付与

H3:通常の見出し

titleクラス付与

H4:通常の見出し

titleクラス付与

H5:通常の見出し
titleクラス付与
H6:通常の見出し
titleクラス付与

H4:通常の見出し

dashicons-before dashicons-text-page

「title」クラスでは無く、ダッシュアイコン(後述)用のクラスを記入した場合の表示です。見出しのレベルやタグに関係なく付与することができます。

ダッシュアイコン

(別ページにリンクしています。)

ギャラリーブロック(サンプル)

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


花火

単独のサムネイル画像

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

左寄せ

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