ホームページ制作・集客スクール

【html/CSS不要!】!WordPressで固定ページや記事ページ内を簡単&自由にレイアウトする方法|SSCのホームページ制作・集客スクールブログ

超お久しぶりです、岡部です。

SSCのホームページ制作・集客スクールで私が担当している、「WordPress講座」でお教えする内容の一部をご紹介。

社員やインターンにブログを任せっきりで、めっきりご無沙汰しておりました。

なぜ突然書く気になったかというと、この度ブログ執筆が成果報酬型になり、毎週1本3ヶ月書き続けると、会社が一万円くれる制度になったからです。やったるぞー。

さて、今回はWordPressのプラグインのお話です。

html/CSSをいじらずに編集したい!!

あるお客様より、レイアウトの変更なども含め自分で更新したいけれど、htmlやCSSの編集に自信がない、できればWordPressの機能だけを使って更新したいというリクエストがありました。カスタマイズすればある程度実現できるのですが、できるだけ低予算でということでしたので、プラグインだけで実現できないか模索してみました。

とりあえずエディタを入れる

まずはエディタを入れないとお話になりません。

TinyMCE Advanced


TinyMCE Advanced

調べるまでもなくたくさんありますが、今回はこれをチョイス。

要素を自由にレイアウトできるプラグイン

これも、ちょろっと探したらすぐ見つかりました。

Page Builder By SiteOrigin


Page Builder By SiteOrigin

上の画像のように、カラムを自由に切ってウィジェットを配置することができるプラグインです。

おお、これだけで全部解決するじゃん?とか思ったんですが、一つ問題が……。

Page Builderでテキストウィジェットを追加するときの編集画面なんですが、エディタが表示されません。うーん、このままじゃ全然自由に編集できないじゃないじゃないか……。

ページをウィジェット化!!

さて、どうしたものか……と対処できるプラグインを探しまわったところ、ありました!!

Custom Post Widget


Custom Post Widget

ページをウィジェットとして利用できるプラグインです。これでページを入力して、Page Builderで読み込むとこんな感じ。

これらのプラグインを組み合わせると、

  • Custom Post Widgetでページを作る!!
  • その際、装飾が必要なところはTinyMCE Advancedで解決!!
  • Page Builderで作ったボックスに、Custom Post Widgetをウィジェットとして配置!!

これで、ある程度自由にデザインが出来て、自由にレイアウトできる仕組みが完成します。素敵。さて、プラグイン入れてテストテスト……ってあれ、ページが表示されない……。

Page BuilderとCustom Post Widgetの相性が悪いみたいで、上記の手順だとページが真っ白になってしまいました……うーん、Page Builderは外せないし、Custom Post Widgtの代わりになる、別のプラグイン無いかなぁ……。

エディタ付きのテキストウィジェットで解決

ページをウィジェット化なんてせずに、もっとシンプルに考えれば良かった。ありました、素敵なプラグインが。

Black Studio TinyMCE Widget


Black Studio TinyMCE Widget

これを導入することで、

  • Page Builderで作ったボックスに、Black Studio TinyMCE Widgetで内容を執筆

以上おしまいです。

なんとシンプルな手順だこと……テストしてみたら、今度はうまいこといきました。周りくどいやり方してないで、最初からこの構成で組めば良かったですね……

大抵のことは実現できる便利なWordPressのプラグインですが、組み合わせ次第で動かなかったりするので、注意が必要だということを再認識できました。

SSCのホームページ制作・集客スクール

当社では、WordPress講座を中心としたホームページ制作・集客スクールを運営しています。
教室は、さいたま市の浦和駅から徒歩5分。

SSCのホームページ制作・集客スクール

Webサイト制作から運用まで幅広いプロのスキルやノウハウを、 目的に合せてピンポイントで習得できるマンツーマン形式のWebスクールですので、
・個人事業主、中小企業の経営者
・企業内のWeb担当者
・起業(フリーランス)する予定のある方
・Webのスキルを活かしたダブルワークをしていきたい方
・Webのスキルを習得したい学生
などなど、様々な方に幅広い目的で受講していただくことが可能です!

SSCのホームページ制作・集客スクールはこちら。

The following two tabs change content below.
岡部 征爾

岡部 征爾

取締役副社長
熊本県出身。SSCのディレクター兼デザイナー。猫飼い、バイク乗り、隙あらばライブに行きたい人。レスポンシブデザイン、WordPressが得意、three.js勉強中。企画提案からデザイン、開発まで、一通り担当してます。