WordPressのテーマ「Cocoon」でホームページを作るときの初期設定と必須プラグイン

ワードプレス

新しいホームページを立ち上げる時、ワードプレスをインストールしてから、毎回必ず行う初期設定があります。いつも思い出すのが面倒なので機械的にできるように項目をまとめました。特にCocoon設定は便利なのですが、設定項目がたくさんあるのでいつも苦労しています。

ワードプレス設定

一般

httpをhttpsに変更

表示設定

ホームページ:トップページ
投稿ページ: ブログページ

サイトアイコン(ファビコン)の設定を行うには、まずWordPress管理画面を開いて、「外観→カスタマイズ→サイト基本情報→サイトアイコン」を選択します。
画像を選んで「サイトアイコン」を設定後、「公開」ボタンを押して完了です。

※画像は512×512pxのPNG画像を設定することを強く推奨します。

Cocoon設定

エディタ設定

ブロックエディタを使わない方は、クラシックエディタの設定にします。
→Gutenberg Gutenbergエディターを有効にするの□チェックを外す

SNS関係

固定ページにいろいろな表示がされているので、これらを非表示にする必要があります。
それぞれのチェックを外します。☑→□

SNSシェア
トップシェアボタンの表示: ☑メインカラムトップシェアボタンを表示する
ボトムシェアボタンの表示: ☑ メインカラムボトムシェアボタンを表示する

SNSフォロー
フォローボタンの表示: ☑ フォローボタンを表示する

画像

投稿のアイキャッチ画像を非表示にする
デフォルトでは本文中にアイキャッチ画像が、画面上に自動的に表示されてしまいますが、これを非表示にするには、WordPress管理画面で、「Cocoon設定」⇒「画像」の順にクリックし、「本文上にアイキャッチを表示する」の✔を外します。

アイキャッチ等の画像の縦横比
全体画像設定→サムネイル画像
全てのページで共通して利用する画像の設定です。
サムネイル画像を正方形にするには、1:1(正方形)を選択する。
※その他には、9:16, 5:8, 2:3, 5:7, 3:4などがある。

インデックス

ブログのインデックス表示を3列にしたい場合に設定してください。

フロントページタイプ 表示形式
●カテゴリーごと(3カラム)※サイドバーを表示しないレイアウト向け。表示数は3の倍数推奨。

カードタイプ
●タイルカード3列

目次

固定ページは、個々の編集ページからも設定できます。

☑目次を表示する
※投稿・固定ページの内容から目次を自動付加します。

表示ページ
☑投稿ページ
☑固定ページ
☑カテゴリーページ
☑タグページ

カラム

サイドバーはウィジェットを設定すると自動的に表示されます。カラム幅はデフォルトではコンテンツ幅800px、サイドバー幅336pxのようです。スキンを変えるといろいろと変化すると思います。

スキン

最初は、スキンなしで良いと思います。あとはいろいろ選べますが「COLORS(ブルー)作者: わいひら」などがシンプルで無難です。あとは他の人が作ったのを参考に、自分で作ってみるのも楽しいです。

ヘッダー

ヘッダー画像は無しでもいいのですが、簡単に設置したい場合は「ヘッダーロゴ」に、横幅1200px(縦400px)くらいの画像(表題付きの完成版)を当てはめるのが一番早いです。

CSS設定

固定ページの投稿日、更新日、投稿者名の非表示

「本文」タブをクリックします。最下部までスクロースし、投稿関連情報の「投稿日の表示」「更新日の表示」「投稿者名の表示」のチェックを外し、「変更をまとめて保存」をクリックします。
しかし、この場合ブログもすべて非表示になってしまいます。

固定ページのみ非表示の場合はCSS対応します。

/*****固定ページの投稿日を非表示にする*****/
.page .date-tags {
display: none;
}
/*****全ページの更新日を非表示にする*****/
.post-update{
display: none;
}
/*****固定ページの投稿者名を非表示にする*****/
.page .author-info {
display: none;
}

上を1行で表すと

/*****固定ページの投稿日、更新日、投稿者名の非表示*****/
.page .date-tags,
.post-update,
.page .author-info {
display: none;
}

固定ページの記事タイトル非表示

特にトップページは記事タイトルを表示したくないので非表示にします。
変更したい固定ページのサイドバーの中のページ設定(サイドバーを下にスクロール)

タイトルを表示しない ☑にチェックを入れます。

※その他すべての固定ページも非表示にしたい場合はCSSで対応

/*****固定ページの記事タイトルを非表示にする*****/
.entry-title {
display: none;
}

プラグイン

必ず使うプラグイン

Contact Form 7
WordPressサイトに設置できる無料の「お問い合わせフォーム」を作成するためのプラグインです。プログラミングの知識がなくても、専門知識なしに簡単にフォームを作成し、記事や固定ページに埋め込むことができます。

Advanced Editor Tools
ブロックエディター (Gutenberg) とクラシックエディター (TinyMCE) を拡張、強化します。文字色変更、表編集などエディタが多機能になります。

All-in-One WP Migration and Backup
All-in-One WP Migration を使用すると、WordPress サイト全体のバックアップと再現、移行が簡単になります。数回クリックするだけで、データベース、メディア、プラグイン、テーマをエクスポートまたはインポートできます。

All-in-One WP Migration Unlimited Extension(有料)
無制限のサイズのエクスポートとインポートを可能にするオールインワンWP移行の拡張機能
※ファイルサイズが100MG以上あると、無料の専用プラグイン「All-in-One WP Migration-file-extension」が必要です。さらに500MB以上になった場合は、有料のプラグインが必要です。

SiteGuard WP Plugin
ワードプレスにSiteGuard WP Pluginをインストールするだけで、セキュリティが向上します。SiteGurad WP Pluginは、管理画面やログインへの攻撃対策に特化したプラグインです。 ログイン時にランダムに表示される「ひらがな4文字の入力」が必要なので、やや面倒ですが安全になります。

あると便利なプラグイン

Yoast Duplicate Post
強力な書き換えと再公開機能を含む、投稿と固定ページ複製用の頼りになるツール。

Highlighting Code Block
HTMLやCSSの具体例をコードで表示するときに必要。シンタックスハイライト(色やフォントで強調表示機能)付きのコードブロックを追加します。(Gutenbergとクラシックエディター共に利用可能)

Admin Columns
使いやすいドラッグ&ドロップのインターフェースにより、管理画面の列をカスタマイズします。例えばデフォルトでは表示されない、スラッグ列の追加ができます。

Jetpack
WordPress エキスパートによって作成されたセキュリティ、パフォーマンス、マーケティングのツール。 毎日の訪問数などを簡易に管理できます。

Category Order and Taxonomy Terms Order
ドラッグ & ドロップで並べ替えを可能にする JavaScript の機能を使って、カテゴリーの並べ替えができます。

ちょっと便利なプラグイン

WP ULike
WP ULikeプラグインを使えば、コンテンツに投票ボタンを簡単に追加できます。カスタマイズ可能な設定と詳細な分析機能により、ユーザーエンゲージメントをトラッキングし、コンテンツを最適化し、忠実なフォロワーを獲得できます。

XML Sitemap Generator for Google(旧 XML Sitemaps)
Googleの検索結果は、検索エンジンのボット(クローラー)がページを巡回し、学習してその結果を表示しています。「XML Sitemap Generator for Google」を有効化すると「sitemap.xml」という、サイト巡回のヒントとなるサイトマップ(クローラー用)を作成してくれます。

Classic Widgets
「外観」 > 「ウィジェット」とカスタマイザーで表示される旧来のウィジェット設定画面を有効化します。ウィジェット管理のブロックエディターを無効化します。

PS Auto Sitemap
カスタマイズおよびデザインされたサイトマップ (読者用)ページの自動ジェネレーターです。

Maintenance
サイトをメンテナンスモードにして、一般公開を避けられます。ウェブサイトが開発中の場合や、いくつかの変更やアップグレードが必要な場合は、メンテナンスプラグインを使用してください。ログインしたユーザーのみがアクセスできるようにも設定できます。

コメント