RAKUTEN ROOM はじめました ▶

無料テーマCocoonとエックスサーバーを利用したミニサイトの作り方

ワードプレスのテーマ「Cocoon」を使ったミニサイトづくり自分用の作業メモ。

作業の流れとどのサイトを見たら参考になるかを、ミニサイト作成しながら記事執筆中。

0.準備

  • エックスサーバでドメインまたは、サブドメインの追加
  • ワードプレス簡単インストール

簡単インストールの際、ドメインまたはサブドメイン/wpにしない。(私の場合)

ここで注意するのはサブドメインにワードプレスをインストールする場合、ドメイン横のⅴでサブドメインを選択すること。私はメインドサイトの上に上書きしてしまい、大変な思いをしました。ご注意を!

1.「Cocoon」テーマと子テーマをインストール。

ワードプレス無料テーマ「Cocoon」は本当に優秀。Cocoonの前身「Simplicty」を愛用していましたが、自分でCSSでカスタマイズしていた機能がつまった新しいテーマです。私は手持ちのサイトを全部Cocoonに変更しました。

「Cocoon」と「Cocoonの子テーマ」をインストールして、子テーマを有効化して利用します。

2.プラグインのインストール

Cocoonは、ほとんどプラグインがいりませんが、必要なものをあらかじめインストール。

サイト運営のためプラグイン

  • Jetpack
  • Akismet Anti-Spam
  • Contact Form 7
  • Category Order and Taxonomy Terms Order
  • WP Multibyte Patch
  • Wordfence Security

画像管理のためのプラグイン

  • EWWW Image Optimizer

SEOのためのプラグイン

  • Google XML Sitemaps
  • WebSub/PubSubHubbub

私はキャッシュ系のプラグインは入れていません。Cocoonおすすめプラグインのほかにいれているのは

  • BackWPup

3.一般設定

サイトのSSL化

サブドメインの.htaccess編集

.htaccess編集は大切なところなので、各レンタルサーバーの公式サイトを参考にしてください。

私用メモ

エックスサーバー「ファイルマネージャー」
設定対象ドメイン>public_html>サブドメイン>wp>.htaccess

4.外観→カスタマイズ

サイト基本情報

  • サイトのタイトル
  • キャッチフレーズ
  • サイトアイコンの設定
  • フロント(固定ページ)

5.Cocoon設定

Cocoon設定はかなり細かいところまで設定できますが、とりあえずデフォルトで記事を入れてから、好きなようにカスタマイズしていきます。

全体設定

◆サイトキーカラーがあれば変更

私はCocoonの繭のように白いサイトというコンセプトが好きなので、いつもデフォルトで使用していますが、サイトのキーカラーを変更するとオリジナリティが出るのでいいですね。

◆サイドバーの表示設定

フロント非表示設定にしています。

アクセス解析

  • アナリティクス設定
  • サーチコンソール設定

OGP

  • OGP設定のホームページのイメージが、デフォルトだとCocoonのままなのでオリジナル画像に変更。
  • ツイッターカードを「大きな画像のサマリー」に変更
    Card Validator で確認

404 PAGE NOT FOUNDページの作成

画像

アイキャッチ画像の中央寄せにチェック

※タイトルの中央寄せをする場合は、テーマの編集→style cssにコードを書く。

https://wp-cocoon.com/community/cocoon-theme/記事タイトル中央寄せのやり方について/

エディター

ワードプレス5.0をインストールまたはバージョンアップした場合、新エディターが「Gutenberg」とても使いにくいという問題が。

Gutenbergエディターを有効にするのチェクを外すと、ワードプレス5.0でも旧エディターが利用できます。

5.固定フロントページの作成

カラムを利用し画面を分割。構成にそってカテゴリー画面を作成していきます。(私の場合)

6.個別ページの作成

Cocoonの表示オプションボックスより「カスタムフィールド」にチェック。カスタムフィールドを使用してデータベースページを作成。

カスタムフィールドは、飲食店や施設紹介など、決まったフォームで記事を書きたいときにおすすめです。あとで評価順に並べ替えることもできます。

カスタムフィールドを簡単作業するためのプラグイン「Custom Field Template」をインストール。

  • TEMPLATE(フォームの登録)
  • [cft] and [cftsearch] ShortCode Format(表示テンプレートの登録)

7.カスタマイズいろいろ

プロフィールを変える

【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ!!
CocoonでプロフィールボックスのデザインをTwitter風にオシャレにデザインするCSSカスタマイズです。コピペで使えます。

カスタムフィールドを利用する

プラグイン「Custom Field Template」を使用

ページスピードをあげる

パソコン98/モバイル81

【Cocoon高速化】後 パソコン93/モバイル86

【AMP】後 パソコン99/モバイル92

ロゴの作成

DesignEvo

ミニサイト作成しながら記事執筆中。2019年1月23日

カスタムフィールドを使ったミニサイトづくり(中級)
...
Sponsored Link
よかったねっとをフォローする
よかったねっと
トップへ戻る