Wordpressの編集方法いろいろ

Wordpressの編集方法いろいろ

記事
IT・テクノロジー
現在ホームページでWordpressの占める割合は世界で45%前後、国内では80%以上と言われています。
もはやデファクトスタンダードと言って良いシェア率です。

これほどまでに広まった理由としてはオープンソースだということもありますが、何よりブログツールから派生したことによる編集・更新の簡便さが挙げられるでしょう。

今回はWordpressの編集方法の種類と特徴について触れていきます。

1.ブロックエディタ

Wordpress5.0以降から実装された、「ブロック」単位で配置・編集する、現在主流の編集方法です。
主にクライアント側で編集する「投稿(お知らせ)」に採用されます。

メリットは積み木を積むような感覚で見出し・文章・画像を組み付けるので、HTML/CSSの知識がなくても整然としたレイアウトでページが作れることです。

デメリットは定型の編集しかできないため、複雑だったり機能的なものについてはブロックエディタ外で対応する必要があります。

ちなみに「HTML/CSSの知識がなくても」と書きましたが、あくまで編集側の話で、構築側では該当のブロックに対してのスタイリングをテンプレート側で反映する対応が必要になります。

2.クラシックエディタ(テキストエディタ)

ブロックエディタ以前の編集方法で、メモ帳のような無地のエリアにHTMLを書いて編集する方法です。
主に「固定ページ(会社概要など)」に採用されます。

メリットはHTMLを直接記述するので、ほとんどの表現・機能が実装できることです。

デメリットはHTMLやショートコードなどの知識がないと編集が難しいこと。
基本的にクラシックエディタはエンジニアの領域になるので、分からずに編集するとレイアウト崩れや機能不全を起こす可能性があるので、更新担当の方が編集する場合は気を付けてください。

また固定ページについてはテンプレート側に直接記述してしまうエンジニアもいますが、簡単な文字修正などでもサーバーからファイルを書き換える手間が発生することやテンプレート数が肥大化してしまう問題があるので、極力テンプレートは共通化して、コンテンツはエディタに記述するほうが望ましいです。

3.編集プラグイン(Elementor等)

WIXやFigmaのように自由なレイアウトで多機能なレイアウトプラグインもあります。
代表的なものは「Elementor」というプラグインで、ノーコードで低価格な制作プランでもよく使われています。
昔はアドビのDreamWeaverやGo Liveなどのツールも同じような機能を持っていて「オーサリングツール」と呼ばれていました。

メリットはデザインを書くようにページを作れることです。
非エンジニアのWebデザイナーには強力なツールで、工数を圧縮できるためコストを抑えられます。
またブロックエディタの拡張版のようなものなので、クライアント側での編集もそれなりに可能です。
当サービスでもノーコードプランではElementorを採用しています。

またこういったツールは書き出されるコード量は増えてしまいサイトスピードが懸念されますが、体感的にそこまで犠牲になっていない印象です。

デメリットとしてはそれなりに学習コストがかかるのと、どうしてもツールだけでは実現できないレイアウト・機能がでてきてしまうので、それなりにcss/jsの知識が必要になるということです。

なんでもできてしまう反面、凝ったページを作ろうとするとコードを書くより複雑になってしまうので、適切に運用することが望ましいです。

4.独自編集機能(カスタムフィールド)

最後にカスタムフィールドを用いた独自編集機能です。

例えば記事の末尾に著者情報を記載するページがあったとして
・著者名
・著者近影
・プロフィール
・コメント
と表示させるのに、毎回そのブロックを編集するのが面倒なので、あらかじめ専用の入力項目を用意しておいて、テンプレート側で定型で表示させるようにを作っておく、といった手法です。

メリットはクライアント側の編集作業が楽になること。
デメリットはエンジニアでないと構築できないこと。

商品やサービスなど定型でたくさんのページが必要な場合に非常に有用な方法なので、同様のページが増えることが想定されている場合は相談してみてください。


以上、Wordpressの編集方法についてでした。
編集方法の選択は実は重要なことで、レイアウトの実現や運用に大きく影響してきます。

今のホームページは運用して育てていくもの。
打ち合わせ時にデザインだけでなくどういった運用をしたいのかもしっかり話し合っておきましょう。


サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す