【WordPress】[Cocoon]超初心者は最初に何から手を付けるのがいいか?

WordPress
https://amzn.to/36BZsZ3

 20年前にhtmlでホームページを書いていたレベルでしか知識のない私がWordPressで悪戦苦闘する話です。
 今回はWordPressをインストールして初めて管理画面を表示させた時、何から手を付けていくのがいいのか、初心者の私が説明します。とにかくメニューが多くて、意味不明なサンプルページが出ていて、作りたいものからかけ離れたスタート地点に立っているかと思います。私はそうでした。

Goal

デザインをそれっぽいやつにして初投稿してみる!




管理画面

 レンタルサーバーがWordPressのセットアップサービスを提供している場合、比較的簡単にWordPressの管理画面まではたどり着けるかと思います。しかし、何をやればいいのか全くわかりません。

 とにかくメニューが多い・・・

テーマの設定

 見た目はとにかく大事だろということで、最初はメニューから外観を選択してみます。するとテーマの選択画面が出てきます。人気の高いのはCocoonというテーマです。気に入る気に入らないという話以前に、初心者には多くの情報が必要になります。Cocoonの記事は潤沢で探すに困らないので、そういう理由で初心者はCocoonにしておいて間違いないと思います。一覧にない方は新規追加からテーマを検索して追加しましょう。

 ここでやっておいた方がいいのが子テーマの作成です。子テーマとは親を継承して作られたテーマです。親のコピーみたいなもんです。この子テーマを使っておけば、親がアップデートなどで変更されても、子は影響を受けないので、突然の仕様変更で見た目が変わってアタフタすることはなくなります

 Cocoonの子テーマはこちらからダウンロードできます。ダウンロードしたZIPファイルを新規追加からアップロードします。

 もし、インストール時に親のテーマがないとエラーになったら、先ほどのページから親テーマもダウンロードして同様の手順でインストールします。全てのインストールが完了したら、以下のように子テーマを有効化できます。

何でもいいから投稿してみる

 次は、ブログに記事を投稿したらどんな感じになるのか気になります。だってテーマを設定したのですから。左のメニュの投稿から見てみます。投稿一覧にHello Worldという記事が一つあるので見てみます。

 記事編集画面が表示されました。左上のブロックが記事、左下がSEO設定と投稿のカスタム設定。右のブロックも投稿文書の設定ですね。左上に記事を書いていって下と右のブロックで色々設定して最後に公開というイメージです。
 Hello Worldをこんにちわ世界に書き換えて保存、プレビューしてみます。

 どんだけSNSに狂ってるんだというくらいボタンが付いたごちゃごちゃしたプレビューがでてきました。これをベースに自分が好きなようにデザインしていくことになります。試しに公開しておきます。公開はプレビューの隣の公開ボタンを押すだけです。

 再度、投稿一覧に戻ってみると、記事が公開されたことがわかります。また、タイトルもこんにちわ世界に代わっています。本文のタイトルがここの一覧に表示されるタイトルになります。

トップページを見てみる

 記事は公開したものの、トップページはどうなっているのか?見てみます。書いた記事が順番に並ぶだけのシンプルな表示ですね。先ほど公開した記事があります。

デザインを変えてみる

 Cocoonは見た目を変えたい時、スキンを設定することで簡単に見た目を変更することができます。テーマ=見た目だろと初心者は直感的に思うのですが、テーマはフレームワークみたいなもので、初心者が見た目を変えるにはスキンを変更するのが手っ取り早いです。
 スキンは同志の方が提供してくれているもので、テーマに合わせた様々なスキンがあります。

 左のメニューからCocoon設定>スキンタブを選択します。するとスキン一覧に様々なスキンがでてくるので、選んだあと、変更をまとめて保存ボタンを選択します。

 すると、プレビューが選択したテーマによって変更されます。変更すると、色が変わったりマウスと近づけた時アニメーションしたりと、だいぶ見た目が変わります。

まとめ

 WordPress初心者はほんとに何からやっていいのかわからなくて、正直自分も最初は泣きそうになっていました。どうやったら見た目を変えられるのかや、無料テーマだからできないんじゃないかとか、無料ブログに戻ろうかなとか何度も挫折しかけました。
 この記事は私のような超初心者であってもの最初の一歩を迷わず進めるようにと思い、なれればと思い執筆しました。もっといいやり方があるかもしれませんが、一助になれば、幸いです。

https://amzn.to/36BZsZ3

コメント