2012-01-11

STEP3:トップページの作成方法(ウィジェットの使い方)

STEP3は、トップページを作成する方法です。

【再確認】
表示設定は『最新の投稿』に設定してください(解説STEP1より)。
◎ダッシュボード>設定>表示設定>ホームページの表示

目次

  1. トップページのウィジェットエリアにテキストや画像を表示する方法
  2. トップページの新着サムネイル画像一覧は自動表示です(アイキャッチ画像を指定)
  3. 投稿ページ下の関連記事・サイドバーの新着記事は自動表示です(設定不要)

1) トップページのウィジェットエリアにテキストや画像を表示する方法

トップページ・サイドバー・フッター・記事ページなどで、
WordPress標準機能の「ウィジェット」が使えます。

あらかじめ用意されているウィジェット項目をドラッグ&ドロップするだけで、
簡単にコンテンツ・機能の追加ができます。

お好きな項目を左から右の枠にドラッグ&ドロップで追加

ダッシュボード>外観>ウィジェット

『左側に並んでいる項目:利用できるウィジェット』
『右側の枠:サイトに表示される場所』

左の項目の中から好きな項目を右の枠にドラッグして追加するだけです。

*テーマによってウィジェットが表示される場所が異なります。

ヒント】まずはサンプルで適当にいくつかウィジェットを追加してみると、
サイトのどこに何が表示されるか確認できます(デモサイトも参考に)。
また、ウィジェット管理画面上部にある[ライブプレビューで管理]を使うと、
実際のページを見ながらウィジェットを設置できて便利です。

テキストウィジェットはHTML/CSSが使えます

「テキストウィジェット」を追加すれば、HTML/CSSコードも使えます。
デモのトップページのテキストや画像はテキストウィジェットで表示しています。

画像を表示させたり、リンクを貼ったり、文字を装飾したり、
超基礎的なCSSさえ覚えれば(または検索&コピペ技で)、自由自在です。
プラグイン・ブログパーツ・SNS・Google Mapなどの貼り付けも可能です。

*HTML/CSSの記述方法はサポート対象外ですので「逆引き辞書サイト」を参考に!

ヒント】投稿エディターの下書きを利用してコードをコピペすれば、
HTMLやCSSを詳しく知らなくても簡単にあれこれ装飾ができます。
検索で「見出し CSS」などコピペ用コード集もたくさん見つかります。

備考(外部サービスのiframe埋め込みコードを貼る方法)

Google MapやYouTubeなど、外部サービスの埋め込みコードを貼り付ける場合は、
レスポンシブ用コードに変換してから、テキストウィジェットに貼り付けると、
どの端末でも綺麗なサイズで表示されるのでオススメです。

Embed Responsively(レスポンシブ用にコードを変換してくれるサービス)
http://embedresponsively.com/

参考リンク:

 

2) トップページの新着サムネイル画像一覧は自動表示です(アイキャッチ画像を指定)

トップページにサムネイル画像が一覧で表示されるようになっているテーマは、
投稿記事を公開すれば自動で新着順に表示されます
アイキャッチ画像の指定さえしてあれば、特別な設定は不要です。

*テーマによって機能の有無が異なります(デモ参照)

 

新規記事の作成

Classic Editorの投稿画面

Gutenbergの投稿画面

投稿の新規追加画面で「アイキャッチ画像を設定」し(解説STEP1を参照)、
記事を公開すれば自動でサイトに一覧表示されます。
一覧表示のレイアウトデザインはデモサイトと全く同じになります。

また投稿記事にカテゴリーを指定すれば、カテゴリーページも自動で作成されます。
レイアウトは自動でデモサイトと同じになります(設定不要です)。

*サムネイル画像の推奨サイズは各テーマの詳細ページ内「テーマの使い方・表示サイズなど」をご確認ください。

表示件数の変更方法

◎ダッシュボード>設定>表示設定>1ページに表示する最大投稿数

一覧の表示件数は、WordPress本体の「表示設定」に連動します。
管理画面の設定を、お好きな件数にすればOKです。

参考リンク:

 

3) 投稿ページ下の関連記事・サイドバーの新着記事は自動表示です(設定不要)

サイドバー新着記事

投稿ページ下の関連記事、サイドバーの新着記事は自動表示です。
同じカテゴリー内に2つ以上記事を投稿すれば関連記事は表示されます。
特別な設定は不要です。

*表示or非表示の切り替え設定もありませんので、
不要な場合はテンプレートファイルから該当コードを削除してください。

***

以上で「Minimal WPテーマの導入設定」「基本の使い方」は全て完了です。

もしここまでで不明点がある場合は「よくある質問」も合わせてご覧ください。
ちょっとしたミスや勘違いでうまくいかない事例等の解決方法をまとめてあります。
導入編のSTEP2とSTEP3のみ無料サポートを行なっています(購入後30日間)。
よくある質問を読んでもうまくいかない!という場合はお気軽にご質問ください。

*WordPress標準機能の操作方法はテーマの無料サポート範囲には含まれませんので、
WordPress公式サポート」をしっかり読むか、Google検索を活用してください!

次のSTEP4ではプラグインを使った簡単なカスタマイズ方法を紹介します。

STEP4:プラグインを利用したカスタマイズ例 >

 

おすすめWordPressテーマ10選