WordPressインストール後の設定から素敵な無料テーマ「Cocoon」でのカスタマイズまで

cocoon WordPress

WordPressのインストールが完了して、セキュリティ面や利便性、SEOを考えてソリシティで行っている設定をこちらで紹介します。

まずはWordpress側の設定を変更して、そのあとにCocoonの設定に取り掛かります。

WordPressでの設定

ユーザー

ツールバーの表示

ユーザー→あなたのプロフィール
ツールバーの「サイトを見るときにツールバーを表示する」のチェック外す

名前の記入

名前を変更することができます

ニックネーム (必須)の記入

ニックネームは初期状態でユーザーIDとなっています。これは歓迎できないので、変更するために別のものを記入

ブログ上の表示名

ニックネームを記入すると、表示名をニックネームに変更できるよう選択肢が現れますのでそちらに変更します。

プロフィールページURL

固定ページでプロフィールページを作成してそちらのURLに変更を推奨

プラグイン

Cocoonと相性のいいプラグインをご紹介します。

  • Broken Link Checker
    今までの投稿を定期的に巡回してリンク切れを見つけると教えてくれます。
  • Contact Form 7
    お問い合わせを手軽に作成することができます。
  • EWWW Image Optimizer
    画像の圧縮ができるので、サイトの高速化に貢献します。
  • Flamingo
    お問い合わせの内容や、送信元を保存してもらえます。
  • Google XML Sitemaps
    サイトマップをsitemap.xmlの形で作成できるようになります。
  • Jetpack by WordPress.com
    様々な機能を持っていますが、特にSNS連携は他にない使い勝手の良さとなっています。
  • PubSubHubbub
    投稿をしたことを世間に伝えるために役立ちます。

設定

メディア

「Cocoon」での推奨メディアサイズを紹介します

Cocoonでの推奨メディアサイズ

サムネイルのサイズを幅300、高さ300

中サイズの上限幅を500、高さの上限を500

大サイズの上限幅を800、高さの上限を5000に変更します。

ここでは補足となりますが、テーマを別のものから変更した際には、「Regenerate Thumbnails」というWordpressのプラグインを使用して、今までのメディアを一括で変更することができます。

ディスカッション

コメント

他のコメント設定
コメントの投稿者の名前とメールアドレスの入力を必須にする

開設当初のサイトはコメント欄を開放しているためチェックを外しています。

無料テーマCocoonの説明

WordPressテーマで無料テーマとして長らく多くの方に愛されてきた「simplicity」その後継となるテーマが発表されました。今の時代に沿った機能が余すことなく注ぎ込まれている「Cocoon」に変更した際にカスタマイズしていく工程を記します

Cocoon設定

ヘッダーレイアウト

ヘッダーの表示形式を選択します

トップメニュー小(右寄せ)

管理者画面

管理者パネル
管理者パネルの表示→表示しない

コメント

ウェブサイト入力欄を表示するか。

ウェブサイトの表示
ウェブサイト入力ボックスを表示する

エディター

無効化することで旧ビジュアルエディター形式で投稿画面が表示されます。

Gutenberg
「Gutenbergエディターを有効にする」のチェックを外す

モバイル

「モバイルボタンレイアウト」をトップボタンに設定します。

Contact Form 7と合わせて使う reCAPTCHA V3

reCAPTCHA V3 Top画面

Cocoonを使用する際のCSS編集

CocoonでreCAPTCHA V3を使用する際に、いわゆる「ページの一番上に戻る」ボタンとかさなってしまいます。ちょっとしたことですがcssで調整をしておきます。

div#go-to-top {
    bottom: 100px; /* 画面下から100pxの位置に変更 */
}
.go-to-top-button {
    background-color: rgba(210, 210, 210, 0.25882352941176473); /* 半透明に変更 */
    font-size: 36px;
}
上に戻るボタンをCSSで調整