トップページにランディングページや任意の記事を設置する方法。

スポンサーリンク

サイトの好きな場所に記事やカテゴリーを設置する方法

WordPressCocoonでの任意の記事を任意の場所に設置する方法です。

 

通常サイトのトップページでは新着記事が最上段に表示されます。

例外として新着記事より上に表示させたい場合は、

「公開」の「この投稿を先頭に固定表示」にチェックを入れることで最上段に表示させることができます。

 

しかし、特定の記事やカテゴリー、ランディングページなどを、目立つ位置に固定表示させたいという目的には物足りません。

PCでの完成表示

当サイトのトップページを見ていただくとヘッダー下にいくつか記事が並んでいるのがわかると思います。

こんな感じです。

ヘッダーの下に任意のページを固定表示させています。

スマホの完成表示

スマホでは最下段に、

 

このように表示させています。

How to

それでは早速、初心者の方でも出来るようになるべくわかりやすくまとめたいと思います。

 

「外観」から「メニュー」を選択します。

 

画面右上の「表示オプション」をタップします。

 

メニュー内の「CSSクラス」と「説明」にチェックを入れておきます。

チェック後は表示オプションは閉じて構いません。

 

「新しいメニューを作成しましょう」をタップしてメニューを新規作成します。

 

  1. 「メニュー名」を記入します。
  2. 記入したら「メニューを作成」。

 

  1. リンクさせたい記事やカテゴリーなどを選択。
  2. 「メニューに追加」

 

ページが複数ある場合は、ドラッグ&ドロップすれば順番を好きなように変更できます。

 

  1. サイトに表示する際のタイトルを記入します。あとで変更も可能です。
  2. 表示の窓にタスキ表示できます。「1」と記入すると「おすすめ」、「2」は「新着」です。何も書かなければタスキは無しです。
  3. 表示窓の中の紹介文です。
  4. 記入し終わったら「メニューを保存」

 

続いて「投稿」の「新規追加」で記事作成ページを表示させます。

 

「タグ」からカラムを選択します。

 

「2カラム」の表示はこんな感じです。

イメージに合わせてカラム数を選択してください。

 

カラムの中にショートコードを打ち込みます。
「この窓(カラム)の中にこれを表示しろ」というコードです。

[navi name="呼び出したいメニュー名"type="1or2orナシ"]

typeのあとの数字は表示させる時の窓枠のデザインです。
枠線が欲しければ1か2、枠線が不要なら数字無しで。

 

通常の記事作成と同じくプレビューで確認できます。

 

デザインが決まったら「テキスト」表示にします。

 

 

こんな感じで表示されるので、

  1. 作業上わかりやすいタイトルを入れます。
  2. 「下書きとして保存」でセーブします。
  3. テキスト表示されたコードをすべてコピーします。

 

「外観」の「ウィジェット」を選択します。

そして、いよいよ好きな場所に設置していく作業になります。

 

 

たとえば「カスタムHTML」利用した場合、

 

表示させたい場所を選んで「ウィジェットを追加」します。

すると、画面右側にウィジェットが追加されるので、

 

「内容」部分に先ほどコピーしてあったコードをペーストして「保存」します。

これで完成です。

写真のように「コンテンツ上部」に設置した場合、

PCでの表示では問題ないのですが、

スマホではトップページの上段がすべてこの表示で覆われて新規記事の表示にスクロールが必要になってしまいます。

 

これを回避するために、PCとスマホ用で別々にコードを貼り付けます。

PCの場合、

 

「[C]テキスト(PC用)」の好きな場所に「ウィジェットを追加」します。

 

「テキスト」にコードをペーストして「保存」します。

これで先ほどと同じようにサイト上部に表示されます。

続いてスマホです。

 

「[C]テキスト(モバイル用)」でスマホの表示させたい場所を選択して「ウィジェットを追加」します。

 

こちらもテキストにコードをペーストして「保存」します。

 

「投稿本文下」に表示させるとこんな感じです。

 

さいごに。

設置場所や何をどのように貼り付けるかはアイデア次第です。

カスタムメニューを使うといろいろなリンクが貼れておもしろいです。

作業環境に依存してデザインしていると、他のプラットフォームで見た時にデザインが崩れることがあるので没頭するのもほどほどに…

コメント

タイトルとURLをコピーしました