WordPressを簡単にレイアウトできるプラグインとは？

WordPressを使ったウェブサイトは、魅力的なレイアウトが簡単に利用できる点で人気があります。無料のものから有料のものまで、選択肢は豊富にあるのですが、オリジナルのレイアウトに変更しようとすると、コーディングのスキルが要求される場合がほとんどです。WordPressサイトの運営者の中には、コーディングなしにドラッグ＆ドロップ操作で簡単にレイアウトを編集する方法を知りたい人がいるかもしれません。この記事では、ページテンプレート機能やデザインを簡略化できるプラグインを紹介していきます。

WordPressのページレイアウト

WordPressのページレイアウトは特徴のある方式を採用しています。投稿ページ・固定ページ・404ページなど、ページごとに「ページテンプレートファイル」と呼ばれる、レイアウトを決める情報を持ったテンプレートファイルを使うのです。これはWordPressでは「ページテンプレート機能」と呼ばれます。テンプレートファイルは、コードが書き込まれたphpファイルであり、その編集には、HTML・CSS・phpなどのコーディングの知識が必須となります。

つまり、コーディングスキルを持つサイト管理者であれば、プラグインを使わずに直接テンプレートファイルを編集できるのです。ちなみに、HTMLはHyper Text Markup Languageの略で、ウェブページの基本的な枠組みを作る言語です。CSSはCascading Style Sheetsの略で、スタイルシートとも呼びます。HTMLの骨格にレイアウトなどの装飾的効果を加えるのはCSSの役割です。

phpはHypertext Preprocessorの略称で、ウェブページとウェブサーバーの間でのインタラクティブな処理が可能になる言語です。HTMLとCSSで書かれたウェブページは、基本的にサーバーからの情報を表示するのみとなります。そこにphpを導入すると、ウェブページ上にあるフォームにユーザーが入力したデータをサーバーに送って、そこで処理した結果を再度ウェブページ上に反映することができるようになるのです。なお、WordPressのテンプレートファイルのコーディングを理解するにはphpのスキルは必須です。

このような、テンプレートファイルには3つの種別があります。1つ目は、index.phpファイルで、2つ目は、すべてのページ内で使える「パーツテンプレート」です。さらに、3つ目として、設定によって使える場面が限られるテンプレート群もあります。まず、最初のindex.phpは、WordPressのテーマの表示に不可欠なファイルです。このファイルとstyle.cssがなければ、テーマの表示自体ができません。パーツテンプレートには、header.php、footer.php、sidebar.phpなどがあります。これらは、ページのレイアウトをサイト全体で統一するために使います。

あるページを表示する際に他のページでも使い回せる部分には、このようなパーツテンプレートを組み合わせて表示する点もWordPressの特徴の1つです。たとえば、ヘッダーやフッターは、固定ページであっても投稿ページであっても、同じサイトであれば同じような表現にするのが一般的といえます。そこで、ページの構成要素をパーツ化しておき、同じ表現の部分には同じパーツを使い回すわけです。なお、パーツテンプレートは変更の際にも便利といえます。なぜなら、それぞれのページごとに編集する必要がなく、テンプレートを変更すれば、その変更は適用されたページすべてに反映されるからです。

オリジナルのレイアウトのページを作る際には、既存のテンプレートファイルを編集したり、新規にテンプレートファイルを自作します。このようにしてできたテンプレートファイルは「カスタムテンプレート」と呼ばれます。たとえば、既存のテンプレートファイルを編集する方法でオリジナルのレイアウトを実現したいとしましょう。この場合は、ダウンロードしてある既存の「テーマ」を構成するテンプレートファイルを編集するのです。ここまで読んでくると、WordPressの「テーマ」がどのようなものかがわかるでしょう。つまり、Twenty FifteenなどのWordPressのテーマは、主にテンプレートファイルの集合体といえるのです。

テーマの具体的な編集手順は、まず、管理画面（ダッシュボード）を開きます。左側コラムに表示される「外観」をクリックし、プルダウンメニューで表示される項目の中から「テーマの編集」を選びましょう。編集画面が表示されたら、右にあるコラムのファイルリストをスクロールさせます。編集したいphpファイルを選んで、左にある編集エリアでコードを書き換えます。なお、テンプレートファイルを直接編集する場合の注意点は、作業を始める前に必ずバックアップを取っておくことです。

コードを編集してしまうと、うまく表示されなくなることは日常茶飯事です。その際には「デバッグ debug」と呼ばれる文法の誤りを取り除く作業を行いますが、どうしてももとに戻らなくなることもあります。そうなったときには、バックアップしたデータを使って、編集前の正常に表示される状態に戻すのです。

【おすすめプラグイン】1.Elementor

WordPressのプラグインにはさまざまな機能のものが提供されています。なかでも「ページビルダー page builder」と呼ばれる、ウェブページの作成を補助・簡略化するプラグインの代表的な存在がElementorなのです。Elementorの主な機能の1つ目は、ドラッグ＆ドロップによるページの作成です。インストール後に有効化すると、一般的なプラグインと同じように管理画面の左コラムに「Elementor」の設定メニューが表示されます。このメニューの下の階層には、システム情報やナレッジベース、及び詳細な設定項目が並びます。

同時に、新規にページを追加するときの編集画面にも「Elementorで編集」ボタンが表示されるのです。ページのレイアウトなどが可能な編集画面は、こちらから移行します。ページの編集画面は2つのエリアで構成されています。左側のコラムに表示される「編集要素」と呼ばれるボックスを、右側に表示されているページイメージにドラッグ＆ドロップする、というのが編集の基本操作です。このボックスは「ウィジェット」と呼びます。この操作は、HTML・CSS・phpなどのコーディングを、ビジュアルで直感的なものに変換しているといってもよいでしょう。

ページ全体のレイアウトデザインは、まず、右側のページイメージの点線で囲まれた「ウィジェットをここにドラッグ」という領域に、左から必要なウィジェットを追加します。複数のコラム表示にする場合のコラム数は、この領域の赤丸に白抜きの「プラスボタン」を押すと選べます。すると、ウィジェットを挿入できる、グレーのプラスボタンを囲む領域が点線で表示されるのです。この操作を繰り返すと、ドラッグ＆ドロップ操作だけで、ページ全体のレイアウト枠組みが完成します。

Elementorの主な機能の2つ目は、メディアライブラリにアップロードされた画像や動画ファイルのライブ編集が可能な点です。編集作業の結果について、更新ボタンなどを押さずに即座に確認することがでるため、微調整が素早くできます。このライブ編集によって、細かい時間のムダが解消され、サイト構築に要する時間の短縮が期待できます。このように、編集結果が素早く反映される機能をインスタントページロードと呼ぶことがあります。

【おすすめのプラグイン】2.Anywhere Elementor Pro

Anywhere Elementor Proは、コーディングすることなくレイアウトをデザインできるプラグインです。ただし、Elementorのアドオンとして提供されているため、単独では使えません。「アドオン add-on」とは、あるプログラムに対して機能を追加するものです。要するに、Anywhere Elementorの位置づけは、Elementorをさらに使いやすくする便利機能を提供している仕組みといえます。ElementorはPro版でなくてもかまいませんが、インストール・有効化が必須です。

Elementorでは、アーカイブページ・固定ページ・投稿ページ・404ページ・検索結果ページなどをドラッグ＆ドロップで作成できます。Anywhere Elementorの主な特徴は、そのようなページに埋め込むことができるさまざまなテンプレートを作成して、そのショートコードを取得できる点にあるといえるでしょう。ショートコードとは、短縮されたコードで本来のコードを呼び出す仕組みです。ショートコードを使うとコードの表記がシンプルにできます。

上位版となるAnywhere Elementor Proは、追加される機能がより多く提供されます。たとえば、ECサイトのためのページでWooCommerceを使うのであれば、Pro版にアップグレードすると作業効率の向上が期待できるでしょう。なお、テンプレートはレイアウトを決定するだけなので、ページによって表示されるテキストや画像は変わっても、設定したレイアウトで統一されます。

【おすすめプラグイン】3.Page Builder

Page Builderは、編集画面に新たな編集モードを追加します。WordPressでは、標準的なページの編集モードには「ビジュアルモード」と「テキストモード」が用意されています。ビジュアルモードは、ワードプロセッサー的な感覚で、文字や画像を挿入したりフォントの種類や文字の色を編集したりするモードです。テキストモードは、コードを編集する際に使います。HTML・CSS・phpなどのコーディングの知識があれば、テキストモードを使って細かい編集が可能になるのです。

このような標準的な2つのモードは、実際にブラウザに表示されるときのレイアウトが可視化されているわけではありません。Page Builderは、ここにレイアウトの状態がわかるような編集モードを付け加えるのです。まず、ページ全体のコラム数を決めた後で、ブロック化されている表示エリアをドラッグ＆ドロップして視覚的に挿入していくことで、大まかなレイアウトを決めます。そして、それぞれのブロックを標準的な2つのモードを使いながら編集していくのです。

【おすすめプラグイン】4.TinyMCE Advanced

ページ編集には「ビジュアルモード」を使っている人も多いでしょう。ワードプロセッサー感覚で編集ができるため、シンプルで使いやすいエディタだからです。とはいえ、編集項目はそれほど多くありません。TinyMCE Advancedは、この編集項目のボタンを増やすことができるプラグインです。インストールして有効化すると、管理画面の「設定」のプルダウンメニューの中に「TinyMCE Advanced」が追加されます。ここをクリックすると、エディタの編集項目ボタンを追加・削除できるページが開きます。現在の編集ボタンの状態と追加可能なボタンのリストが表示されるので、必要なものをドラッグ＆ドロップするだけでカスタマイズできるのです。ウェブページのレイアウト編集がワードプロセッサー的な感覚で可能になるため、編集作業効率の向上が期待できます。

【おすすめプラグイン】5.beaverbuilder

beaverbuilderは、コーディングせずにレイアウトが可能なページビルダー系プラグインです。基本的には、視覚的なドラッグ＆ドロップによる操作性など、ページビルダーとしての十分な機能を持っています。beaverbuilderを使う最も大きなメリットは、使用をやめた時にページのコード内にショートコードが残らないことです。多くのページビルダーは、ショートコードでコマンドを実装します。そのプラグインの利用を停止したときに、そのショートコードが残ってしまうのです。その点、beaverbuilderは不要なショートコードでコード全体のシンプルさが失われることがありません。

【おすすめプラグイン】6.Visual Composer

Visual Composerは、直感的な操作でページのレイアウトや要素の編集を可能にするプラグインです。視覚的なドラッグ＆ドロップによる操作性など、基本的なページビルダーとしての機能は十分といえます。WordPressで使える多くのプラグインが提供されていますが、開発元がアップデートを停止するものも少なくありません。そうなると、WordPress自体の更新によって使えなく場合があります。このVisual Composerの場合、ユーザー数が150万人を超えており、有名なテーマに組み込まれることが多いため、プラグインとしての信頼性や将来性は優良であると考えて良いでしょう。

【おすすめプラグイン】7.Single Post Template

WordPressの固定ページには、ユーザーがオリジナルのレイアウトを設定したカスタムテンプレートが選択できるように、プルダウンメニューに組み込む機能が標準で実装されています。まず、サーバーのthemesフォルダにカスタムテンプレートファイルをアップして、ファイル内でテンプレート名を指定します。そうすると、ページ編集画面の「ページ属性」の「テンプレート」プルダウンメニューから、そのカスタムテンプレートを適用できるようになるのです。この機能は、ブログなどで用いる投稿ページにはありません。Single Post Templateは、投稿の個別ページごとに、固定ページと同じようにテンプレートの変更を可能にするプラグインなのです。

ページレイアウトが崩れる原因

WordPressのページで、レイアウトが崩れることがあります。主な原因には以下のようなものが考えられます。1つ目は、アップデートの影響です。WordPressは定期的にアップデータが提供されており、随時アップデートすることが推奨されています。何らかの原因で、アップデートに不具合があると、レイアウトに影響することがあります。2つ目は、プラグインの干渉です。WordPressのサイトでは複数のプラグインをインストール・有効化しているケースがよく見られます。このとき、プラグイン同士で悪影響を生むことがあるのです。

3つ目は、CSSが効いていない場合です。レイアウトはCSSによってコントロールされています。その記述に間違いがあるとレイアウトは崩れてしまいます。4つ目は、画像のサイズが大きすぎたり、小さすぎたりする場合です。ページ上の要素のサイズはレイアウト時に決めているはずですが、そのサイズと違う画像を挿入すると、レイアウトが崩れることがあります。5つ目は、投稿の本文による影響が考えられます。

とくに、テキストモードで入力した場合、コードの記述に誤りがあるとレイアウトに影響することがあるのです。6つ目は、改ざんなどの被害を受けている場合です。WordPressは高機能で使いやすいコンテンツ管理システムですが、ハッキングやマルウェアに対しての脆弱性が問題になることがあります。セキュリティが十分でない場合、悪意のある行為の結果としてレイアウトが崩れていることも考えられるのです。

まとめ

WordPressのページレイアウトの編集には、ページビルダー系のプラグインを使えば、比較的簡単に魅力的な表現が可能になります。多くのプラグインでは視覚的なドラッグ＆ドロップで操作できるため、作業効率も向上するはずです。