PR
PR

サイトのフロントページを投稿一覧から自作の固定ページに~Word Pressの無料テーマCocoonの機能で簡単に変更できるョd(゚-^*)

ブログ

こんばんは~´∀`)ノ)) HELLO♪

日曜日は、ローカルな話題なんですが…。

昨日変更した自作フロントページの備忘録として。

また私と同じように、『知識は無いけどサイトのフロントページを変更したい』と思ってる方の参考になればと思い、記憶の確かなうちに投稿しちゃいます。

フロントページ変更のために、このテーマを取り上げている諸先輩のブログを拝見しましたが…。

(゚Д゚≡゚Д゚)?(゚Д゚≡゚Д゚)?(゚Д゚≡゚Д゚)?(゚Д゚≡゚Д゚)?

ナニイッテルカワカリマセン…(TдT)

サイトのフロントページを投稿一覧から自作の固定ページに~Word Pressの無料テーマCocoonの機能で簡単に変更できるョd(゚-^*)

そこで、自分なりに簡単に使える機能で自作の固定ページをフロントページ用に作ってみました。

…たぶん私の固定ページの作り方が一番簡単ではないかと?σ(´∀`me)??

当サイトの環境

サイト:Word Pressで作成 テーマ:Cocoon エディター:ブロックエディター(Gutenberg)
Cocoonは色々なカスタマイズが簡単で使いやすい。
無料なのにとっても凄いテーマだと思います。(*^▽^*)ノオススメデスヨ
Word Press5.0から、ブロックエディター(Gutenberg)なるものが標準化されて…。
ブロックエディターが、今後のスタンダードになるそうな。
旧エディターの使用は2021年末までとのことです。
せっかく慣れたのに…。(||-д-)チ――ン
hiro1967
hiro1967
初心者にも簡単にがコンセプトらしいけど…。
初心者ですけど…旧エディターに慣れた私には使いづらい…。(ノД`)
それに、編集してると必ず指定したはずのアイキャッチが勝手に変更されるんですけど~!(#゚Д゚)
だから公開した後に、アイキャッチを変更し直さなきゃならないの…。(ノД`)トホホ
 
と新ブロックエディターをストレスなく使えるにはまだまだ修正が必要?σ(´∀`me)??
ブロックエディターの環境が整うまで、暫くは旧エディターを使っていたい方はこちらを。
ブロックエディター(Gutenberg)を使用しないで旧ビジュアルエディターを利用する方法
投稿画面のGutenbergエディターを無効にして旧式のエディターで編集する方法です。

コンセプト~私がフロントページでお知らせしたいこと

・どのようなサイトか初訪問者にもすぐ分かるようにしたい。
・これまで通り新着記事がすぐにわかる。
・アクセスの多い人気記事が分かるように。
・カテゴリー毎の記事が分かりやすいように。
・過去の旅行記まとめページに行きやすく。
これまで、新着記事一覧がフロントページで、ヘッドメニューでカスタマイズしてきましたが…。
これでホントに見やすくなったのか?というジレンマが…。(´Д`|||)
サイトを作って7ヶ月、投稿数も間もなく200を超えるので、一覧からでは過去記事が見つけにくくなってきました。
どれだけコンセプト通り表現できたか分かりませんが?
サイトを訪れてくれた皆さんにとって、少しでも閲覧し易くなっていれば幸いです。人´Д`*)

新・フロントページ作り

実際の新・フロントページになる固定ページを作成します。

1.レイアウト~カラムを分割する方法

トップページのレイアウト当サイトのレイアウトです。(2019.3.31)

灰色の部分は変更なしの部分。

固定ページ→新規追加から作業を始めます。

タイトルは付けても付けなくても良いです。

付けると2サイト紹介の上にタイトルが表示されます。

2.画像に文字を重ねる方法

ブロックエディターを使う理由はこの作業のためです。

画像+文字1①+をクリックしてブロックを追加します。

一般ブロックの中からカバーを選択します。

画像+文字2③画像を追加して。

④文字を入力。

赤○のエリアで、画像の位置、文字の大きさや配置など変更できます。

hiro1967
hiro1967

この画像に文字を重ねる為にプラグインが必要だったり、CSS?ちんぷんかんぷんな呪文が必要な難関項目。_:(´ཀ`」 ∠):_ .

…呪文がわかっても何処に投入したら良いかも謎。(´Д`|||)

その作業がこんなに簡単に出来ました!d(゚-^*)

カラムを2カラムのブロックにする方法

2カラム2カラムのブロックを追加するには一般ブロックもありますが、

Cocoonレイアウトの2カラムをオススメします。

hiro1967
hiro1967

なぜならCocoonの分割カラムは色分けされてるので分かりやすいのです。

d(゚-^*)

3.新着投稿を表示する方法

最初は、クラシックブロックにしてショートコードから新着記事一覧を編集したんですが、保存後再起動すると、エラーで表示されず。(´Д`|||)

という失敗を重ね行き着いたのがこちらの方法

新着記事2カラムにした左のカラムの設定です。

① 一般ブロックから見出しブロックを追加

自由に見出しを入力し、見出しの指定も私はH2にしましたが自由に設定。

② ウィジェットからショートコードを追加。

Cocoon新着記事一覧のショートコードがこちらです。

色つきの部分は自由にカスタマイズ可能なんです。

[]の中に次の文字列を入れて、使ってくださいね。 d(゚-^*)

new_list count=”5” type=”large_thumb” cats=”all” children=”0” post_type=“post”

・count=”5“ 表示する記事の数。数字を自由に変更してください。

・type=”large_thumb

default:通常のリスト large_thumb:大きなサムネイル表示 large_thumb_on:大きなサムネイルにタイトルを重ねる
・cats=”all“ 表示するカテゴリ
全てのカテゴリ:all 任意のカテゴリー:数字を指定。複数のカテゴリーならカンマ区切りで指定。
hiro1967
hiro1967
カテゴリーの数字を見つけるには?
投稿→カテゴリー一覧を開き、目当てのカテゴリーにカーソルを合わせると画面下部に表示される。category&tag_ID=数字

・children=”0“ カテゴリーの子カテゴリーを含めるかどうか

含める:1 含めない:0
 
・post_type=”post“ 表示するページタイプを選択
post,page:投稿・固定どちらも post:投稿ページのみ page:固定ページのみ
もっと詳しく知りたい方はこちらから。

③ Cocoonブロックからボタンブロックを追加

ボタンブロック文字を入力して赤枠の部分でカスタマイズ。

URLは、以前のトップページだった投稿一覧ページにするのでまだ未記入で。

④ カテゴリー毎の新着記事も同様に

カテゴリー毎新着記事赤枠で囲った部分も同様の作業でできちゃいます。

変える部分はcats=”数字をそれぞれの表示したいカテゴリーのIDを記入するだけ。

その他変更は任意で。

これでページの大部分は完成しました。(*^-゚)vィェィ♪

4.ランキング投稿を表示する方法

人気記事こちらは①②は3.新着投稿を表示する方法と同じです。

ショートコードの中身だけが変わります。

Cocoon人気記事のショートコードはこちら。

[]の中に次の文字列を入れて、使ってくださいね。 d(゚-^*)

popular_list days=”all” rank=”1” pv=”1” count=”6” type=”large_thumb” cats=”all
・count=”6
・type=”large_thumb
・cats=”all
については、新着記事一覧のショートコードと同様なので省略します。
・days=”all”  データの集計期間
1:1日 7:1週間 30:1か月 all:全期間
rank=”1”  ランキング番号を表示するか
1:表示する 0:表示しない
pv=”1“ PV数の表示をするか
1:表示する 0:表示しない

5.ウィジェット(プロフィール)を固定ページに貼り付ける方法

ウィジェット(プロフィール)を固定ページに貼り付けるには、どうしてもプラグインが必要になりました。

追加したプラグイン:Widget Shortcode
① Widget Shortcodeを有効にして
② 外観→ウィジェットから利用中又は停止中のウィジェットを開く
ウィジェット赤枠で囲った部分にショートコードが現れるので。
プロフィール
これをコピペして貼り付けるだけです。

6.カルーセル

Cocoonにはカルーセルという、ヘッダー下にお勧め記事などを表示する機能があります。

このカルーセルは最大10個表示でき、自動で回転させることもできます。

カルーセル① Cocoon設定→カルーセルから設定します。

設定方法は、こちらをご覧下さい。

ヘッダー下にお勧め記事カルーセルを表示する方法
お勧め記事を回転表示させることができるカルーセル機能の使い方です。
hiro1967
hiro1967

私は過去の旅行まとめを表示させています。

これで、新・フロントページが完成しました。

公開をρ(‘-‘* ) ポチッとします。

フロントページの変更

新・フロントページが完成したので、次は変更です。

旧・フロントページ(投稿一覧)を移行するカラの固定ページ作り

① 固定ページ→新規追加

② タイトルを『投稿一覧』とか適当につけます。

③ パーマリンクを適当に設定します。listとかblogとか…

 このURLを3.新着投稿を表示する方法の③ボタンブロックで保留にしていたURLに貼り付けます。

④ それ以外は何もせず公開をρ(‘-‘* ) ポチッと

フロントページの変更

① 設定→表示設定を開く

② ホームページの表示を固定ページを選択

ホームページ:リストから新・フロントページを選びます。
投稿ページ:リストから『投稿一覧』←先ほど作ったカラの固定ページ

③ 変更を保存をρ(‘-‘* ) ポチッと

以上でフロントページの変更が完了です。

簡単だと思った方はお試しを。(*^▽^*)ノヨカッタラドウゾ

《END》((*´∀`*))ノ゛see you♪

コメント