スポンサーリンク

再び「Simplicity2」から「Cocoon」へ。ローカル環境を構築して最小限カスタマイズしました。

ブログ

こんにちは。

以前、こんな記事を書きました。

WordPressテーマを「Simplicity2」から「Cocoon」に変更後、すぐに行ったこと。
こんにちは。 WordPressテーマを「Simplicity2」から「Cocoon」に変えてみています。 細かいカスタマイズはこれ...
WordPressテーマを「Cocoon」から「Simplicity2」に戻した理由。
こんにちは。 以前、こんな記事を書きました。 ところが現在、WordPressテーマを再び「Simplicity2」に戻...

これらの記事では、WordPressテーマを「Simplicity2」から「Cocoon」に変更したこと、そして「Simplicity2」に戻したいきさつが書かれています。

2019年8月3日に再び「Cocoon」を利用し始めて、現在も「Cocoon」を使い続けています。
今回は、WordPressテーマを「Cocoon」に変更した理由や、「Cocoon」をカスタマイズするにあたって行ったローカル環境の構築について書いていこうと思います。

スポンサーリンク

再び「Cocoon」に変えた理由。

なぜ、一度「Simplicity2」に戻したWordPressテーマを再び「Cocoon」に変えたのか?
それには以下の理由があります。

  • ブロックエディタを使ってみたかった。
  • 「Cocoon」のカスタマイズに時間をかけなくても良いと気づいた。

これらについて少し詳しく書いていきます。

ブロックエディタを使ってみたかった。

ブロックエディタに興味を持つにあたり、印象深かったのがこちらの記事↓。

Cocoon初心者のためのエディタ活用の手引き。ブログ見た目いじりはそっちのけ
ワードプレスやCocoonに不慣れなうちはカスタマイズよりは記事投稿してエディタの使い方を身につけようという話。

特に心引かれたのは以下の部分。

なぜ移行するか。なぜブロックエディタをメインに使うか。

なぜならCocoonではブロックエディタの表現力や機能面がクラシックエディタのそれをすでに上回っているから。

すでに装飾系の機能では「ブロックエディタ >>> クラシックエディタ」になっています。加えて、Gutenberg本来のブロック単位での編集領域の管理は慣れると便利。

(『Cocoon初心者のためのエディタ活用の手引き。ブログ見た目いじりはそっちのけ』より)

「そうか、表現力がすごいのか!そんなにすごいのなら一度使ってみたいなあ」と感じたのです。

ブログの文章を書くときにはクラシックエディタでサクサク入力していくのが好きですが、ブロックエディタの表現力も気になりました。

ブロックエディタを使うのであれば、「Simplicity2」よりも「Cocoon」の方が整備されていて使いやすそう。
そのため、WordPressテーマを「Cocoon」に戻すことを考え始めました。

「Cocoon」のカスタマイズに時間をかけなくても良いと気づいた。

以前「Cocoon」を適用したときに、カスタマイズを途中で断念していました。
それは、「Simplicity2」よりもデザイン上いじれるところが多いため。
もちろん「Cocoon」が悪いのではなく、私自身がカスタマイズのドツボにハマってしまったと言えます。

「ブロックエディター使ってみたいな、でも『Cocoon』のカスタマイズは途中で止まっているんだよなあ……」と悩んでいたのですが、上記の記事にはこうも書かれていました。

カスタマイズしていて不毛だな…って感じたらブログを始めた目的に立ち返りましょう。

カスタマイズが目的の方(クリエイター)、片手間でスイスイカスタマイズできる方ももちろんいらっしゃいます。職業柄、または趣味で得意なんだと思います。そうでなければ、カスタマイズをやりすぎた一日はブログを始めた目的に立ち返る。
(中略)
Cocoonは有能だし、見た目(スキン)やエディタ装飾は次々とリリースされます。自分でCSSとかいじるのが得意ではない方(私も含めて)は、便利な機能や装飾を作ってくれた開発者やクリエイターに感謝しつつ本来の目的に立ち返り、ブログ記事投稿に時間を使う方が良いかも。

(『Cocoon初心者のためのエディタ活用の手引き。ブログ見た目いじりはそっちのけ』より)

これを読んで目から鱗が落ちた私。
「そうか、カスタマイズに時間と労力をつぎ込む必要は別にないんだった!」と気づきました。

私の場合、憧れのブログがあるのですが、うまくカスタマイズができません。
CSSなら見よう見まねで編集できるようになってきましたが、PHPをいじる=プログラミングとなるととても無理。

やっぱり、こうして文章を書く方が好きだし向いているようなのです。

であれば、カスタマイズはほどほどにしておいて、文章を書く方が楽しいし生産的。
今回「Cocoon」に戻すにあたり、カスタマイズは思い切って減らすことにしました。

余分なカスタマイズを減らすと、CSSファイルの記述量=容量が減るため、サイトの表示速度が少し上がるかもしれないというメリットもあります。

スポンサーリンク

「Cocoon」を最小限カスタマイズする。

さて、カスタマイズを減らすという方針を立てた上で、どのようにして「Cocoon」を自分好みにしていくか?

WordPressのローカル環境を構築。

以前はWeb上のCSSファイルをFTPソフトでダウンロードしてパソコンで編集し、編集し終えたらアップロードして表示を確かめるという方法を取っていたのですが、とても効率が悪く、うまく表示されなくなる危険性も高かった。

そこで今回は、パソコンにローカル環境を構築(=パソコンにも仮のWordPressをインストール)して、ローカル環境でCSSファイルをいじって見た目を確認し、Web上のWordPressに反映させるという手順を踏みました。

「ローカル環境で見た目を確認」ってなんぞやという、私と同じように初心者の方へ。

ローカル環境のWordPressは基本的に、自分のパソコン上でしか見られません。
ですので、たとえカスタマイズに失敗してもWeb上のWordPressには影響がなく、より安全にCSSファイルなどを変更していけるのです。

ローカル環境の構築さえしてしまえば、パソコン上での管理自体は楽なので、まずは構築のみ試してみるというのもありかもしれません。

WordPressのローカル環境を構築する方法については、この本にも詳しく書かれています。

WordPressのローカル環境を構築するのは初めてだったので少し手間取りましたが、「Local by Flywheel」を利用してみました。
参考にさせていただいたのはこちらの記事↓。

WordPressローカル環境「Local by Flywheel」が有能ツールだったので良いとこ言いたい
先日、Wordpressローカル環境作成ツールの「Local by Flywheel」を使ってみたところ、控え目に言っても神ツールだったもので、つい良い所を紹介したくなりました。

一度、「Bitnami」のWordPressモジュールをインストールして利用してみたのですが、表示が遅いし何かと使いづらい。
「Local by Flywheel」の方が簡単かつ直感的に操作できています。

Web上のWordPressをローカル環境にコピーする。

これが初心者にとっては一番難しかったです。

というのは、WordPressはデータベースを作成しているため、単純に全てのファイルをコピーすれば済むという話でもなく……

そんな折、非常に参考になったのがこちらの記事↓。

WordPress本番環境(エックスサーバー)からローカル環境(flywheel)への移行方法【超初心者向け】 | にいなんこ | にいなんこ

偶然ながら私と同じ、エックスサーバーと『Local by Flywheel』という組み合わせ。
かなり分かりやすく書かれていて、この記事を見ながら環境のコピーを行いました。
結果、なんとか無事にコピーできました。

ローカル環境でいじったCSSファイルをアップロード。

ローカル環境でWordPressをいじった後、そのカスタマイズをWeb上のWordPressに反映させるためにはいくつか方法があります。

  1. ローカル環境のWordPressファイル全て(データベース含む)をFTPソフトでアップロードして、Web上のデータベースを書き換える。
  2. ローカル環境でカスタマイズしたCSSファイルのみアップロードして、ウィジェットやプラグインをWeb上のWordPressで設定し直す。

上記二つが主な方法だと思います。

今回は、CSSファイルとウィジェットを少し変えただけだったので、2.の方法を採用しました。
データベースを書き換えるのは、私のような初心者にとっては難易度が高いので。

ローカル環境でカスタマイズしたCSSファイルをWeb上に上書きアップロードします。
この際、FTPソフトもしくはレンタルサーバーのFTP機能を利用してアップロードします。

アップロード後は念のためWeb上のWordPressの見た目を確認して、おかしなところがないかチェック。
その後、ウィジェットとプラグインを変更して、「Cocoon」の適用が完了です(*ゝω・*)ノ

以下、余談。

ローカル環境を本格的に使うようになってから、Gitを学び直したのですが、その真価の一部を垣間見た気がします。
Gitとは、一言で言うとバージョン管理ソフトの一種です。
CSSファイルをいじる際Gitで管理すると、どこをどう変えたのか一目瞭然&元に戻しやすいので、けっこう便利だなあと。

Gitの入門には、この本↓が分かりやすく読みやすくておすすめです。
「Gitって何?」という状態の私でも楽しく読み進められました(・∀・)

再び使って気づいた、「Cocoon」の良さ。

「Cocoon」を再び使い始めて、その便利さに改めて感心させられました。

デフォルトで目次機能が付いてくる。

個人的に一番嬉しいのが目次機能かもしれません。

「Simplicity2」では目次を表示させるためのプラグインを別途インストールしていたのですが、そちらよりも見た目がきれいに表示されます。

「Cocoon」は「Simplicity2」の進化版テーマというだけあって、シンプルでありながら必要な機能がさらに充実しています。

プラグインを減らせる。

目次用のプラグインを始め、「Cocoon」で不要になったプラグインがいくつかあります。
「Simplicity2」もテーマとしての機能が充実していて、必要なプラグインが少なかったのですが、「Cocoon」ではさらに減らせた。

プラグインを減らすとブログの表示速度を少しでも上げられるので、必要なプラグインが少ないというのはありがたいです。

最後に。肝心のブロックエディタの使い心地は……

さて、「Cocoon」を適用して、ブロックエディタが使えるようになりました。

実はこの記事は一度、ブロックエディタで書いてみました。
そうしたらすぐに行き詰まってしまって(^^;)

ブロックエディタが使いづらいというより、私自身の文章の書き方との相性が悪かったのだと思います。

私のように、クラシックエディタの、しかもテキストモードで文章をガシガシ書きながら頭の中の考えを整理していくタイプには、ブロックエディタでのちょっとずつの入力は向いていませんでした……考えがうまく文章にまとまらなかった。

例えば、「Word」などのテキストエディタでいったん文章を書きだし、そこからWordPressの投稿画面にコピーアンドペーストするという方法であれば、ブロックエディタを有効活用できるかもしれません。

でも、二度手間で面倒なんですよね……(=ω=;)

ブロックの差し替え(変更)が簡単にできれば使いやすいかもしれないので、また調べてみます。

たとえブロックエディタが私に合わないとしても、「Cocoon」はとても使いやすいテーマだと感じています。

カスタマイズもおおかた済んだので、今後は記事を書くことに注力していきたいと思います(^^)/

0

コメント

  1. リンクいただいたようでありがとうございます。

    確かにインターフェースが今までと違いすぎますよね… 一度のチャレンジだけでなく、ちょっとずつ使って慣れるといいと思いますよ。

    慣れるのに1ヶ月。ブロックエディタの表現力の良さ、真価がわかってきたのはそこからさらに1ヶ月くらいです。記事の内部をパーツとして管理できるのでメンテが超ラクです。

    • コメントいただきありがとうございます。

      分かりやすい記事を書いていただき、ありがとうございました。
      記事を拝見して、スマホからの記事編集も便利というお話にも魅力を感じました。
      テキストエディタだとスマホからの編集がスクロール面で大変ではありますので。

      ブロックエディタに一度触ってあきらめるのはもったいない気が自分でもしますので、気長にチャレンジしてみようかなと思います。

タイトルとURLをコピーしました