【WordPress】ConoHa WING＋Cocoonで記事投稿をする（画像解説）【準備編】

こんにちは、プライム・ストラテジーのそまです。

「これからWordPressについて学んでいきたい」「WordPressを使えるようになって提案の幅を広げたい」と考えているWebデザイナーの方と一緒に学んでいければと思っています。 

さて、ConoHa WINGでWordPressサイトを作成したものの、まだテーマの設定もしてないし、記事も公開できてないことに気づいてしまいました。

今回は、CocoonをWordPressに設定して、記事を書ける状態にするまでの初期設定を順番に説明します。

WordPressのインストール手順については、別の記事「ConoHa WINGで高速なWordPressサイトを構築」で紹介しています。まだインストールが済んでいない方は、先にそちらをご確認ください。

この記事は、インストールが完了してWordPressの管理画面にログインできる状態から始めます。
今回も一緒に学んで行きましょう！

このコラムで学べること

この記事を読み終わったあと、以下の状態になっていることを目標にしています。

細かいデザイン変更やプラグインの整備は次のステップで行います。まずは「記事を書いて公開できる状態」を作ることに集中していきましょう！

WordPress テーマに ”Cocoon” を使う理由

WordPressのテーマは数多くありますが、初心者にCocoon（コクーン）がよく選ばれる理由は、無料で使えること、日本語の情報が豊富にあること、設定項目がまとまっていて管理しやすいことが挙げられます。

商用利用も可能で、ブログ・コーポレートサイト・ポートフォリオなど、さまざまな用途で使われています。特定のジャンルに強いというよりかは、汎用性が高いという点が特徴のひとつです。

Cocoonの親テーマ・子テーマを確認する

Cocoonを使う際に、最初に理解しておきたいのが親テーマと子テーマの考え方です。

カスタマイズは必ず子テーマに対して行う、というのが基本の考え方です。

注意点：有効化するのは子テーマのほうです。 親テーマをそのまま有効化してしまうケースがありますが、カスタマイズの観点から子テーマを有効化する運用が推奨されています。

Cocoonの導入手順

インストールされていない場合は、Cocoon公式サイト（wp-cocoon.com）か、ConoHa WINGの管理画面から親テーマと子テーマの両方をダウンロードし、管理画面からインストールします。

ConoHa WINGのかんたんセットアップでCocoonを選んだ場合、すでにインストールされていることがあります。管理画面の「外観」→「テーマ」で確認してみてください。

WordPressの 項目に Cocoonが見つからなかったら

ConoHa WINGでは、Cocoonのテーマを簡単にダウンロードすることができます。
その手順を画像付きで解説します。

まずは管理画面にログインし、「①サイト管理→②サイト設定→③WordPressテーマ→④WordPress」の順に進んで行きましょう。

すると、テーマ購入の項目に行きますので、スクロールして「Cocoon」を選択します。

「選択」「購入」などのボタンを押しますと「Cocoon」のダウンロードページに飛びます。
ここで、「親テーマ・子テーマ両方共」ダウンロードします。

ファイルダウンロード後、WordPressの管理画面に戻りましょう。「外観→テーマ→テーマの追加」と進んでいきます。

その後、上側にある、「テーマのアップロード」を選び、「ZIP形式のテーマファイルをお持ちの場合…」に先程ダウンロードしたファイルを格納します。

注意：テーマは必ず親テーマからインストールするようにしてください。

親テーマ・子テーマ両方共インストールが完了したら、「子テーマの方だけ」有効化をしてください。
理由は先程お話した通り、カスタマイズの観点から子テーマを有効化する運用が推奨されているからです。

WordPressサイトの見た目が変わった！

まだ記事も掲載していないので何もないですが、「Cocoon」のテーマに変更されました。

ここまでで、「テーマにCocoonが設定されている」状態にすることができました。

記事を書く前にやるべき超最低限の初期設定

記事を書く前に、以下の設定だけ先に済ませておくことをおすすめします。一度設定すれば基本的に変えることのない項目です。

① パーマリンクの設定

パーマリンクとは、各記事・ページに割り当てられるURLの形式のことです。後から変更すると、既存の記事URLが変わってしまうため、最初に決めておく必要があります。

設定場所： 管理画面「設定」→「パーマリンク」

初心者の方には「投稿名（/%postname%/）」を選ぶ方法がシンプルでよく使われます。記事タイトルをもとにURLを手動で決めることができます。

設定後は「変更を保存」を必ずクリックしてください。

② サイト名とキャッチフレーズ

設定場所： 管理画面「設定」→「一般」

• サイトのタイトル：ブラウザのタブやSEOに影響します
• キャッチフレーズ：サイトの説明文です。空白のままでも構いませんが、決まっているなら入力しておきます

③ プロフィール（任意）

設定場所： 管理画面「ユーザー」→「プロフィール」

記事の筆者情報として表示されることがあります。名前・自己紹介文を入れておくと、記事に表示されたときに自然な見た目になります。後からでも変更できるため、今の段階では簡単なもので構いません。

④ お問い合わせ・プライバシーポリシー（必要に応じて）

ビジネス用途でサイトを運用する場合や、広告・解析ツールを使う予定がある場合は、プライバシーポリシーの設置が必要になるケースがあります。

今すぐ必要かどうかは運用方針によって異なりますが、サイトを公開する前には確認しておくとよいと思います。

5. Cocoonで最低限見ておく設定

設定場所： 管理画面「Cocoon設定」

Cocoon固有の設定画面です。タブが多く、最初は迷いやすいところですが、今の段階で確認しておく項目は少なめで大丈夫です。

• 「スキン」タブ：サイト全体の見た目の雰囲気を選べます。気に入ったものを1つ選んでおく程度で問題ありません
• 「全体」タブ：フォントやサイト幅など。変更しなくてもサイトは動きます

デザインの細かい調整は、記事を数本書いてからでも遅くありません。最初から作り込もうとすると、最初の記事作成が進まないと思いますので、まずは現状のデザインのまま進めることをおすすめします。

CSSを書いてオリジナルデザインにしたい！と思ったら

「早速Webサイトのデザインをいじりたい」、と思った方もいるかと思います。
オリジナルデザイン変更するには、「style.css」を編集する方法や、「追加CSS」を編集する方法があります。

「みんなと同じシンプルデザインじゃつまらない！」そんな風に思った方は、ぜひチェックしてみてくださいね。

注意：「style.css」を触る際は、サイト崩れの可能性があることを理解してから触るようにしてください。

まとめ

今回は、CocoonをWordPressに設定して、記事を書ける状態にするまでの初期設定を順番に説明していきました。

わかりづらいところはなかったでしょうか？もし、”ここがわからなかった！”、”ここでつまづいた！”などあれば私のXにコメントいただけると嬉しいです！ 
そまX：https://x.com/risako0917_ 

次回予告 

次こそは、「1本目の記事を公開する方法」として、実際の投稿画面の操作・カテゴリの設定・公開までの手順を順番に説明いたします！

「設定はできたけど、投稿画面で何をどうすればいいかわからない」という方は、続けてそちらも参考にしてみてください。

お気軽にお問合せを！

Webデザイナー向けWebシステム/CMS入門ページでは、Webデザイナーさんへのお役立ちコンテンツをご紹介していきます。

• Webについての知識（Webアプリケーション、サーバ知識など）
• WordPressの構築や制作の基本知識
• WordPressを超高速化する「KUSANAGI」を利用するためのノウハウ

まだまだできたばかりのページではございますが、Webデザイナーさんと一緒に課題を解決していく、という気持ちでコンテンツ制作をしてまいります。

そこで、「これが知りたい！」「これが見たい！」などご希望あればコンテンツ依頼フォームよりご連絡ください！
フォームはちょっと…という方は私のX（https://x.com/risako0917_）へご連絡いただいても大丈夫です！