WordPressのカスタマイズやプラグインに関する情報です。
ページビルダープラグイン「Elementor」と相性のいい無料テーマ「Astra」の組み合わせは、子テーマのスタイルシートにほとんど記述することなく「Elementor」だけのカスタマイズで1ページもののおしゃれなシングルページサイトが出来上がります。
お知らせやブログなどの記事を書かないサイトでテーマ「Astra」は使いやすいのですが、後から記事を書きたいという要望があると、記事一覧や個別記事ページのデフォルトデザインがちょっとイマイチで・・・。
完成形のイメージ
記事一覧はこのようにサムネイルとタイトル・カテゴリ・日付・抜粋を左右に横並びさせたいと思います。
まずはサンプル記事を書いて、カスタマイズなしのデザインを確認してみます。
サンプル記事を書く
カテゴリを作成する
お知らせとブログをカテゴリ分けするため、このようなカテゴリ構成にします。
新着情報「information」
└お知らせ「news」
└ブログ「blog」
各カテゴリに記事を書く
投稿者ユーザを作成して、お知らせ4件・ブログ3件のサンプル記事を書きます。
アイキャッチ画像は設定しません。
- お知らせ：画像なし記事
- ブログ：画像あり記事
書いた記事の投稿一覧。
メニューに追加してページを表示
「外観＞メニュー」から「メインメニュー」を選択して、カテゴリー「新着情報」をメニューに追加します。メインメニューに「新着情報」が表示されます。
カスタマイズなしの場合
カスタマイズなしで表示した記事のデザインです。
タイトル文字が大きくて余白が広すぎですね。デフォルトのままサイドバーなし・1カラム表示です。
新着情報の記事一覧(アーカイブページ)
個別記事(個別投稿ページ)
カスタマイズしていく
アーカイブと個別記事ページに右サイドバーをつける
1カラムの記事は画像が大きくなりすぎて、なんだかバランスが悪いのでサイドバーをつけてみます。
「外観＞カスタマイズ＞サイドバー」と進み、ブログ記事・アーカイブで「右サイドバー」を選択して「公開」を押します。
このままではまだサイドバーは表示されません。
次に「外観＞ウィジェット」へ進み、メインスライダー内に「カテゴリ」ウィジェットを追加します。
パンくずリストを出す
サイトが2階層以上になるとパンくずリストも出したいので「カスタマイズ＞パンくずリスト」と進みます。
- ヘッダー位置：後
- Unicode：＞
- ホームページで無効化しますか？：ON
こんな感じで設定して「公開」。
表示項目・タイトルサイズの変更
アーカイブと個別記事は「表示項目」「タイトルサイズ」がカスタマイザーから変更できます。
「外観＞カスタマイズ＞ブログ」と進み「ブログ / アーカイブ」「個別投稿」でそれぞれ設定します。
表示/非表示・表示順の設定
「GENERAL」タブから、目のアイコンで表示・非表示を設定、項目をドラッグして表示順を変更します。個別投稿ではアイキャッチ画像を表示しない設定にします。
フォントサイズの変更
「DESIGN」タブから、フォントサイズを変更します。
- アーカイブタイトルのフォントサイズ：2EM
- タイトルのフォントサイズ：1.2EM
- 投稿 / ページ タイトルのフォントサイズ：1.5EM
その他、余白・文字の太さ・背景色は後ほどCSSで
Astra無料版はカスタマイザーでの設定はここまでなので、最後にスタイルシートでカスタマイズ。
企業サイトでのアイキャッチ画像
企業や施設などコーポレートサイトの場合、記事を書く時に「アイキャッチ画像を設定してくださいね」というのがなかなか浸透しないのではないでしょうか。書く手間はなるべく減らしたいというのが現状だと思います。それでアイキャッチ画像の自動設定が必要になります。
アイキャッチ画像の自動設定
これまで作ったサイトをみる限り、企業からのお知らせにわざわざ画像を挿入してくれるスタッフさんってあまりいなくて、文字だけのことが多いし、ブログなどの記事を書く手間はできれば少ない方が好まれるのでアイキャッチ画像を設定してください、とはなかなかお願いできません。それで、先頭画像を自動で画像をアイキャッチ画像にしてくれるプラグインを必ずインストールするようにしています。
「XO Featured Image Tools」のインストール
アイキャッチ画像自動設定プラグイン「XO Featured Image Tools」をインストールします。
以前は「Auto Post Thumbnail」を使っていましたが、新エディタ「Gutenberg」では上手く動かない様子。
インストール後「設定＞XO Featured Image Tools」と進み、以下を設定して「変更を保存」を押します。
- 投稿一覧 / アイキャッチ画像項目：投稿 (post)にチェック
- 投稿の編集 / 自動生成：投稿 (post)にチェック
- デフォルト画像：600*400pxぐらいの画像を設定
サンプル記事を再度保存
最初に書いたサンプル記事、お知らせ4件・ブログ3件を再度「編集＞更新」ボタンを押します。
アーカイブ「新着情報」ページで確認
全記事にアイキャッチ画像が設定されます。
画像がなかったお知らせ4件にはデフォルト画像、ブログ3件には先頭画像がアイキャッチ画像として表示されます。
最後に画像とタイトルを横並びにカスタマイズ
そのままの表示したアーカイブページは画像サイズもばらばら、画像が大きくてバランスが悪いです。
これを画像を左、タイトル・カテゴリ・日付・抜粋を右に表示してみます。
ついでにサイドバーの余白も調整。
子テーマの「style.css」を編集します。
サムネイル一覧で横並びにするスタイルシート サンプル
/* 記事ページ */
.archive .ast-custom-button,
.single .ast-custom-button {
color: #1a1a1a;
border-color: #1a1a1a;
}
.archive .ast-custom-button:hover,
.single .ast-custom-button:hover {
color: #fff;
background: #1a1a1a;
}
.read-more {
font-weight: 600;
}
@media (min-width: 768px) {
.archive .ast-blog-featured-section.post-thumb.ast-col-md-12 {
width: 40%;
margin: 0 20px 0 0;
}
}
.archive .entry-header {
display: inline-block;
margin-bottom: 0.7em;
}
.archive .entry-content.clear {
clear: none;
}
.ast-separate-container .ast-archive-description {
background-color: #1a1a1a;
padding: 1.5em 2em;
}
.ast-separate-container .ast-archive-description h1 {
font-weight: 600;
color: #fff;
}
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
padding: 2em;
}
.ast-separate-container .entry-title,
.ast-separate-container .entry-title a {
font-weight: 600;
margin-bottom: 0.7em;
line-height: 1.4;
}
.archive.ast-separate-container .entry-title,
.archive.ast-separate-container .entry-title a {
max-width: 420px;
}
@media only screen and (max-width: 1200px) {
.archive.ast-separate-container .entry-title,
.archive.ast-separate-container .entry-title a {
max-width: 400px;
}
}
@media only screen and (max-width: 1100px) {
.archive.ast-separate-container .entry-title,
.archive.ast-separate-container .entry-title a {
max-width: 330px;
}
}
@media only screen and (max-width: 479px) {
.archive.ast-separate-container .entry-title,
.archive.ast-separate-container .entry-title a {
line-height: 1.3;
max-width: 430px;
}
}
.ast-separate-container .entry-meta,
.ast-separate-container .entry-meta * {
font-size: 0.9rem;
font-weight: 400;
}
.ast-separate-container .entry-content {
font-weight: 400;
}
.archive .ast-separate-container .entry-content p {
margin-bottom: 0.7em;
}
.single .entry-header {
border-bottom: 1px solid #dfdfdf;
padding-bottom: 1.5em;
margin-bottom: 1.5em;
}
/* サイドバー */
.ast-separate-container.ast-two-container #secondary .widget {
padding: 1.5em;
}
h2.widget-title {
font-weight: 600;
border-bottom: 1px solid #dfdfdf;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
}
カスタマイズ後
CSS追加後のアーカイブページ・個別記事ページがこちら。かなりスッキリします。
新着情報の記事一覧(アーカイブページ)
個別記事(個別投稿ページ)
次回はこの新着記事一覧をトップページに表示する方法をご紹介します。
