Home » Web構築 » セキュリティーの次はテーマ選びをしようかな -Themaによってはカスタマイズのためにエディターが搭載?

セキュリティーの次はテーマ選びをしようかな -Themaによってはカスタマイズのためにエディターが搭載?

by Ceri

以前の記事にも書きましたけど実はCMS(コンテンツ・マネージメント・システム)はDrupalが好きだったりします。教育機関や学術学会などの知識ジャンルのデータベース的なものにはDrupalはとても向いていると思ってるから。設定も直感的に設定できてデフォルトでも機能が十分で、あとはThemaでカスタマイズしていけばよかったから。
しかし、コロナで時間ができてブロガーさんスタイルのサイト構築を久しぶりにやろうと思ったときにやっぱりWordPressでしょということになりました。なんと12年ぶりに使ってみるにしたという話はこちら『百聞プラスでやること&やりたいこと』でも書いてますのでどうぞ合わせて読んでみてくださいね。

『百聞プラス』でやること&やりたいこと

もちろん今後も運営中のDrupalとの比較も交えながら、この一般的に大人気の WordPressを便利に使いたいという考えをもとに、あれこれ悪戦苦闘を日記として書いていくつもり(これももう既に書いてますけど…)

テーマ選びでガラッと変わるから楽しいね

では、なんとか前回の記事で書いたようにインストールを終えたので次はThemaを選んでみようと思います。これは楽しそうですよ!これも前の記事に書きましたけれど、Themeの自作は現状ではしません。さっさと運営して書きたい記事をアップするのが現状の優先順位が高いから。
Themeを選んでいくとコンテンツEditorがいろいろ搭載されている有料Themeが目につくんですよね。どんなエディターで構築できるのか?便利なのか?その辺りも含めてテーマ選びをしていきました。
12年前の過去にはWPBakery Page Builder(旧Visual Composer)を使ってましたけど… 今回もそういうのを使ってその使用感も書いていきたいですね。でも、やっぱり自分につやいやすいものにしないとダメですけどね。そしてどうやら現在はElementorのが人気なのかな? 海外ものの候補のThemaはこれを同梱しているもの多いみたい。
なので、このElementorを使ってみたいという願望でこのプラグイン付属していてさらにこのプラグインの機能を充実させているThemaがいいなぁと思ったんですよ。

探したのは過去に何度も使ったことのあるここにあるテーマ。

Event Market

ありすぎて迷うわね…

以前、Drupalのテーマもここから買ったことがあります。価格が安い割にはDrupalのほうもテーマ独自の構成用エディタが付属していたりと時間をかけずにWebを構築できる利点もたくさん。考えれば一番高価なのが人の働く時間。サクサク作るにはこういう有料テーマを使うのもいいと思ってます。
WordPressのテーマは人気があるが故にDrupalよりも本当にたくさんありますね。迷うくらい素敵なものがたくさん。実は『Newspaper』というテーマは過去に購入済みです。もう閉鎖したサイトなのでこれを継続的に使ってもなんら問題はなさそう。実際 Envato Marketにログインすれば過去に購入したテーマは今も最新バージョンがダウンロードできましたね。でも、Newspaperは独自のビルダーであんまり使いごごちがよくなかった記憶が…結局WPBakery Page Builderで記事を書いてましたね。デザインもかなりカスタマイズしないと気に入らなかったし。今はバージョンも上がって変わってるのかもしれないけど、この際お勉強の意味も込めて『Soledad』というシンプルでなおかつ希望のElementorを利用可能なThemeを選んでみました。

 WordPressのThema『Soledad』を選んだ理由

第一はデフォルトで使われているフォントが好みなこと。そしてシンプルなテンプレートがいくつもあるし、お値段の割に拡張性も高そうだし… それに星評価も高いし言うことなし。
SEOは WordPressではプラグインで対応させられると思うし、気になるけど日本製のお高いThemaを買う必要もないかなと… 多分日本製を買ったら、好みにするまでデザイン的なカスタマイズがもっと何倍もかかりそうだったと思うんですよ。そんなデザインをいじることも楽しいけれど、やっぱる早く記事を書いていきたい… なので省ける努力はこの有料テーマにお任せしちゃおうかと。
なんとお値段は59USDです。それなのに100以上のテンプレートやブロックなどインポートできるアイテムが豊富なのも魅力がありますよね。でも、一回決めちゃったら後は必要ないものですけど、オリジナルのブロックを作ってテンプレート化するなどの際は便利だと感じます。凝ったサイトを作るつもりはないのであくまでもアーカイブ記事が綺麗に並ぶことができれば十分なんだけどね。
それでもカスタマイズ項目はたくさん… 結局気に入るようにするにはそこそこ時間もかかりましたよ。
もちろん、現状で100%の満足はしてませんけど、おいおい進めていかないとだめ。こんなことで記事を書く前にうんざりしちゃうの嫌だから…
そもそも自作したらもっと時間かかったかしらね? シンプルだからそれほどでもなかったのかもしれませんが、CSS書くのは大変だったと思うわ。ということで今はこれで時間的節約はできたと思って次に進みましょうか。

↓こんな感じで100以上のテンプレートがボタン1クリックで可能。選んだのは甘い色の『Craft DIY Blog2』ブログにはちょうどいいでしょう。

Soledadのテンプレート選び

なんと100以上のテンプレートが用意されています。

テンプレートのデフォルトから変更した点はメニューのフォントやヘッダーのスタイル

LogoはSVGでチャチャっと作成。
あとはフォントカラーはいくつか変更。フォントサイズも部分的に変更。
外観 > カスタマイズで変更できなものは Custom CSSで弄りました。当然テーマはchildテーマで運用しているので、このメインテーマのバージョンアップでも子テーマはずっとそのまま使い続けていいんだってような?(この辺は変わってないと思うけど)
…それでいいんだよね?

このあと、実はSEO対策でスピードアップを狙ってCSSの統合&圧縮でデザインが崩れたりしたので…カスタマイズしたヘッダーとメニューバーは変更することを余儀なくされましたけど…
(この辺りは搭載したSEOプラグインの時に書きますね。)どうやらThemeの付属プラグインのヘッダービルダーとの相性なようです。これも検証してわかったらまた書きますね。

このSoledadというThemaには独自テンプレートを追加する際にElementorからsampleをボタンひとつでインポートできようになってます。でも、ElementorだけじゃなくてWPBakery Page Builderユーザーのための用意もあるんですよ。よって使い慣れた方で使えばいいよってユーザビリティーに優れている点がこのThemeのいいところかな。
Elementorだと視覚的にサムネイルでデザインを確認しながらインポートできるのでやっぱり多少は使い勝手は違います。
なるほどね… でも… 単純にテキストだけ打つならクラシックエディターでいいけどなぁ。というかそっちの方が使いやすいようなきもします…

テーマインストールだけでは足りないもの -ブログに必要なプラグインいくつかを追加」

Themeを選んで次に追加したいのはテキストエディターの項目をもう少し充実させるプラグインと、みなさんブロガーさんには必須の目次(INDEX)を追加してくれるもの。
目次はThemaのSoledaoにもデフォルトで搭載されていますけど、なんとなく使い勝手が悪いので取りあえすプラグインでヘッドライン(見出し)で自動挿入してくれるものを選んで入れてみましょう。この2つはブログには絶対必須なプラグインらしいので右に習えです。

プラグインの候補はいくつもあるけど私はいつも評価が高いものでたくさんの人数がインストールしているものから選んでいきます。

HTMLエディタから文字色などを変更できるようにAdvanced Editor Toolsを追加してみる

クラシックエディターもElementorのテキストエディターも文字色の変更とかデフォルト設定ボタンがない…
フォントサイズも変更したいしハイライトに色もつけたいでしょう。
ということで過去にも使ってた「TinyMCE Advanced」が名前を変えて「Advanced Editor Tools」となってプラグインにありました。
もう、エディターの充実は記事を書くことを楽しくする大事なツールだからテーマより大事なカスタマイズかもしれません。

Advanced Editor Tools

導入したのはこれ

Advanced Editor Tools

これを導入して設定画面から欲しい項目をドロップ&ドラッグでメニューバーに追加して設定保存をかけると…

項目が増えたでしょう!

こんな感じにでいろいろなことができるようになりましたよ。
まぁ、これだけ項目が追加されればほとんど不足はないと思いますね。DrupalだとデフォルトでCKエディタがついてきますけど… いずれにしろ便利にツールを使いこなすためにこういうカスタマイズはやっておかないといけません。

当たり前ですが、この設定でElementorのテキストエディターにも項目が増えてました。
これはブロックの設定などにもちょこっと便利に使えるわね。こういう連携も WordPressの人気の一つのような気がしますよ。

Elementorテキストエリア

Elementorにも項目が増えてます

Elementorにもテキストエディターにこんな感じでいろいろ増えたので一層便利になってます。

見出しから自動でINDEXを作ってくれるプラグイン

LuckyWP Table of Contentsこれでいいでしょう。CSSはスピード対策のために統合しますからあんまりデザインをカスタマイズしないで使えるものの方が良さそうです。

LuckyWP Table of Contents

目次をプラスするプラグイン

特段、難しい設定もなく十分です。INDEXの枠だけ多少調整しましたけど、それくらい。
小さいサイズにすると文字の回り込みの設定もできるみたい。必要に応じてそれもいつかやってみましょうか…ね。という感じで、導入時はこれで十分かな。エディターの項目に目次ボタンも追加されてましたね。なんか…一歩ずつ進んでいきますね。

テキストエディター項目

赤枠が追加されたボタンですよ

こんな感じでやっと使えるところまで来ました。カテゴリー設定はまだ途中…悩んだけど…今はこんなざっくりでいいかなぁ。

こんな感じの経験談的備忘録です。誰かの参考になるとかじゃなくて、同じ境遇で微笑んで読んでくれたらうれしいです。
何年も使っててもいつまでたってもWordPressの初心者のようです… 

次回はSEOとかちょっと仕掛けてみますわ(これまた勉強しないとよく分からない…)

You may also like