サイトのホームページを固定ページにしてさまざまな記事一覧を表示する

Recent Posts Widget Extended, トップページ, 固定ページ, 新着記事一覧

サイトのホームページをプラグインを使って作成する

ここでホームページというのは、ドメインのトップページのことを差します。
このサイトでは　https://martto.net のことです。

トップページ用の固定ページを作成する

まず、どういった内容にしたいのか構図を考えましょう。私は困ってプラグインのお世話になりました＞＜

プラグインPage Builder by SiteOriginを使う

あわせてSiteOrigin Widgets Bundleもインストールして有効化しておきます。
Page Builder by SiteOrigin
SiteOrigin Widgets Bundle

固定ページを新規追加する

  1. 「固定ページ」→「新規追加」から新しく固定ページを追加します。

タイトルを入力する

  1. ここで入力されたタイトルはルクセリタスの設定で非表示にできますので、自分でわかりやすい名前にしておきましょう。
  2. 編集モードを「ページビルダー」に切り替えておきます。

新規固定ページを追加

＞＞ ここまでは過去記事の完コピです
ここから先は、まるっと。のトップページと同じようなものを作る前提で書いていきますので、使いたいものがあれば参考にしてくださいね^^

Recent Posts Widget Extended をインストールする

プラグインの新規追加からRecent Posts Widget Extended をインストールし有効化します。
新着記事一覧やおすすめ記事一覧の表示に使用します。すでにインストール済みの方は必要ありません。
Recent Posts Widget Extended

その1　イメージ画像を表示する

固定ページを新規追加してページビルダーに切り替えた直後の画面

  1. パーマリンクは変更する必要ありません
  2. 「列を追加」をクリックします

top-page-01

Page Builder by SiteOriginでの列の追加画面

  1. Set row layout:は「1」を選択します
  2. 右下にある「挿入」ボタンをクリックします

top-page-02

固定ページの編集に戻ったあとの画面

  1. 先ほど追加した列が選択されている状態（色が濃くなっている状態）で、左端の「ウィジェットを追加」をクリックします。

    2. top-page-03

  2. 一覧からSiteOrigin Imageを選択します

    3. top-page-04

  3. 列の右側にある編集をクリックします

    4. top-page-05

SiteOrigin Imageウィジェットの編集画面

  1. Choose Mediaボタンをクリックして表示させたい画像を選択します。
    ここで選ぶ画像はあらかじめサイズなどをサイトに合わせて調整し保存しておきましょう。

    2. top-page-06

  2. 右下のSet Mediaボタンをクリックします。
  3. 右下の「終了」ボタンをクリックします。

    4. キャプチャ画像

その2　新着記事一覧を表示する

  1. 先ほどと同様にPage Builder by SiteOriginですぐ下に1列を追加します。

    2. top-page-08

  2. 追加した列が選択されている状態（色が濃くなっている状態）で「ウィジェットを追加」をクリックします。

    3. top-page-09

  3. Recent Posts Extendedウィジェットを選択します。
  4. 追加したウィジェットを編集します。
    サイドバーにカスタム投稿を含む新着記事一覧をサムネイルつきで表示するで紹介したように設定しますが、サムネイル画像のサイズや抜粋の長さはトップページに合わせて決めてください。
  5. CSSにClass名「new-article」を追加します。

    6. top-page-17

  6. Use Default Stylesは必ずOFFにしCustom CSS は空にしてください。

    7. top-page-09

  7. 新着記事一覧のCSSを子テーマのCSSに追記します。
    8. CSS
    /* トップページの新着記事一覧 */
.rpwe-block ul{
	list-style: none ;
	margin-left: 0 ;
	padding-left: 0 ;
}
.rpwe-block li{
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	padding-bottom: 10px;
	list-style-type: none;
}
.rpwe-block li:last-child{
	border-bottom: none;
}
.rpwe-block h3{
	background: none ;
	clear: none;
	margin-bottom: 5px;
	margin-top: 0 ;
	font-weight: 400;
	font-size: 12px ;
	line-height: 1.5em;
	border-left:none;
}
.rpwe-block a{
	font-weight:700;
	font-size:14px;
	display: inline ;
	text-decoration: none;
}
.new-article a{
	font-size: 18px;
}
  8. こんな風になっていれば成功です♪
    ちなみに見本のサムネイルのサイズは126×225です。

キャプチャ画像

その3　カテゴリー名を表示する

  1. 同様にPage Builder by SiteOriginで3行目に1列を追加します。
  2. 追加した列が選択されている状態（色が濃くなっている状態）で「ウィジェットを追加」をクリックします。
  3. SiteOrigin Editorウィジェットを選択します。
  4. 追加したウィジェットを編集します。HTMLで入力しているのはカテゴリの説明文です。

    5. top-page-11

  5. CSSはカテゴリ一覧の最初に説明文を挿入した時に追加しているため省略します。
  6. こんな風になっていれば成功です♪

top-page-12

その4　カテゴリーの記事一覧を表示する

  1. 同様にPage Builder by SiteOriginで4行目に2列を追加します。

    2. top-page-13

  2. 左側の列が選択されている状態（色が濃くなっている状態）で「ウィジェトを追加」をクリックします。

    3. top-page-14

  3. Recent Posts Extendedウィジェットを選択します。
  4. 追加したウィジェットを編集します。

    5. top-page-15

  5. 同様に右側の列にもウィジェットを追加して編集します。
  6. CSSを子テーマに追記します。あくまでここまでに紹介したCSSをすべて追記したことが前提です。
    7. .widget-title a{
	text-decoration:none;
	color:#333;
}
.widget-title a:focus, a:hover {
	color:#dd3333;
}
  7. こんな風になっていれば成功です♪

    8. キャプチャ画像

あとがき

その他の列＆ウィジェットの追加は上で紹介したことの繰り返しです。
ウィジェットであれば、たいてい追加できると思います。
アドセンスウィジェットも可能です。
CSSの記述がサイドバーに新着記事一覧を追加した時と重複するので、省略している部分があります。
もし、見た目がうまくいかないなぁという時は、新着記事一覧で紹介しているCSSも追記してみてください。
ただ、自分が使う必要のあるCSS以外は、Recent Posts Widget Extendedにもともと書いてあったCustom CSSを削除しているので、必要に応じてCSSを子テーマに追加してください。
もっとウィジェット別に丁寧に書こうかと思ったのですが、すべてのCSSを検証しながら紹介するのが困難すぎて諦めます。（無念）
もし質問などがあれば、わかる範囲で一緒に考えますので、コメント欄からお尋ねください。
ただし、実例（URL）の添付がないと、残念ながら当方では意図が理解できないことが多いです。

3

プラグイン

Posted by どらみ