悩む人サイト型トップページにしたくて記事一覧を固定ページで作成したいんだけど方法が分からないので教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- デフォルト投稿タイプの記事一覧を固定ページで作成する方法
- カスタム投稿タイプの記事一覧を固定ページで作成する方法
- カスタム投稿タイプの記事一覧のタイトルとサブタイトルを変更する方法
※固定ページに入力した内容が反映されない。
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
【SWELL】記事一覧を固定ページで作成【デフォルト投稿タイプ】
記事を用意
投稿で10記事用意しました。
トップページを表示
カード型の3カラム（横並び）で9記事が表示されており、ページネーションも設置されています（2ページ目はブログ01のみ）。
トップページの仕様ついて
管理画面メニューから、「設定」＞「表示設定」を選択します。
「表示設定」が開きました。
WordPressをインストールした時点では、こちらの設定がトップページに反映されています。
- ホームページの表示：最新の投稿
- 1ページに表示する最大投稿数：10件 ※下記画像では9件に変更しています。
デフォルト投稿タイプの記事一覧を固定ページで作成
管理画面メニューから、「固定ページ」＞「新規追加」を選択します。
「固定ページ」が開きました。
- タイトル：Top ※お好きなタイトルでOK。
「公開」をクリックします。
「表示設定」を開きます。
- ホームページの表示：「固定ページ」を選択します。
- ホームページ：「Top」を選択します。
「変更を保存」をクリックします。
「固定ページ一覧」を開きます。
Topがフロントページ扱いになっています。
トップページを表示します。
何も表示されていません。
これは当たり前ですが、フロントページ扱いとなった固定ページ（Top）に何も書いていないからです。
Top（フロントページ）を編集
「ブロック挿入リストを切り替え」から、「ブロック」＞「SWELLブロック」＞「投稿リスト」を選択します。
- 表示する投稿数：「3」を選択します。 ※お好きな投稿数でOK。
- MOREリンクの表示テキスト：「ブログ一覧」と入力します。 ※お好きなテキスト名でOK。
「更新」を忘れないように。
トップページを表示させます。
カード型で3カラム（横並び）表示されました。
リンク（ブログ一覧）にカーソルを乗せるとトップページのURLが表示されました。
これは、「ブログ一覧」を表示させるための固定ページが作成されていないためです。
「ブログ一覧」を表示させるための固定ページを作成
- タイトル：ブログ一覧 ※お好きなタイトルでOK。
- パーマリンク：blog ※お好きなパーマリンクでOK。
- サブタイトル：「Archive」と入力します。 ※お好きなサブタイトルでOK。
「公開」をクリックします。
「表示設定」を開きます。
- 投稿ページ：「ブログ一覧」を選択します。
「変更を保存」を忘れないように。
「固定ページ一覧」を表示
「ブログ一覧」が投稿ページ扱いになっています。
これで、「ブログ一覧」を表示するための準備が整いました。
「ブログ一覧」を表示
リンクにカーソルを乗せると固定ページ（ブログ一覧）で決めたURL（サイトドメイン/blog/）が表示されています。
リンクをクリックすると「ブログ一覧」が表示されます。
デフォルト投稿タイプの記事一覧を固定ページで作成する解説は以上となります。
【SWELL】記事一覧を固定ページで作成【カスタム投稿タイプ】
カスタム投稿タイプで「お知らせ」をプラグイン無しで作成
記事を用意
お知らせで10記事用意しました。
Top（フロントページ）を編集
※投稿リストの挿入はデフォルト投稿タイプで紹介しているので割愛しています🙇
投稿タイプで絞り込む
- 「設定」の「ブロック」＞「Pickup」＞「投稿タイプで絞り込む」から「お知らせ」を選択します。
すると、「お知らせ」の記事へと切り替わります。
MOREリンクの表示テキスト
- 「お知らせ一覧」と入力します。 ※お好きなテキスト名でOK。
トップページを表示
リンク（お知らせ一覧）にカーソルを乗せると「ブログ一覧」のURLが表示されますが、これは固定ページで「お知らせ一覧」を作成していないためです。
固定ページで「お知らせ一覧」を作成
- タイトル：「お知らせ一覧」にします。 ※お好きなタイトルでOK。
- パーマリンク：「news」にします。
※カスタム投稿タイプのスラッグと同じにします。
カスタム投稿タイプのスラッグとは下記画像赤枠の「news」になります。
- サブタイトル：「Archive」にします。 ※お好きなサブタイトルでOK。
- MOREリンクのURL：「news」にします。
※カスタム投稿タイプのスラッグです。
お知らせ一覧にカーソルを乗せるとURLが「news」になっています。
リンク（お知らせ一覧）をクリックすると、お知らせ一覧ページは表示されましたが肝心の記事が表示されていません。
この場合は、パーマリンクの「変更を保存」をクリックします。
管理画面メニューから、「設定」＞「パーマリンク」を選択します。
パーマリンク構造はいじらずに「変更を保存」をクリックします。
再度、「お知らせ一覧」へアクセスすると表示されます。
しかし、固定ページで決めたタイトルとサブタイトルが反映されていません。
タイトルとサブタイトルを反映させていきたいと思います。
タイトルとサブタイトルの設定
エックスサーバーにアクセスします。
トップページから、「ログイン」＞「ファイルマネージャ」を選択します。
ファイルマネージャにログインします。
ファイルマネージャにログインしました。
「サイトドメイン」＞「public_html」＞「wp-content」>「themes」>「swell」へと移動します。
archive.phpを「swell_child」にコピーします。
「swell_child」にコピーしました。
- 名前変更：「archive.php」 → 「archive-news.php」に変更します。
※newsはカスタム投稿タイプのスラッグです。
archive-news.phpを編集していきます。
編集画面を開きました。
- $archive_title = ‘
お知らせ一覧‘; ※お好きなタイトルでOK。 - $archive_title_subtitle = str_replace( ‘pt_archive’, ‘
Archive‘, $archive_data[‘type’] ) ※お好きなサブタイトルでOK。
「更新」を忘れないように。
そして、「お知らせ一覧」へアクセスするとタイトルとサブタイトルが反映されています。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
今回は以上です。