Elastic Theme Editorの使い方


以前紹介した、SeoToasterConcrete5のように、GUI(ドラッグ&ドロップやマウス操作)である程度のテンプレートが自分で設定できるプラグインがWordpressにもあったので紹介します。

Elastic Theme Editor」というものらしいです。簡単なインストール、使用方法を記載します。

Elastic Theme Editorインストール

  1. 本家サイト(http://elastictheme.org/)から[Elastic Theme Editor 0.0.3]をダウンロード&解凍します。
  2. wordpress管理画面の[プラグイン]から[Elastic Theme Editor]を有効にします。

以上でセットアップは終了です。

Elastic Theme Editorを使ってみる

プラグインの使用方法を簡単に説明します。大まかな流れは以下です。作成したものはwordpressのテーマとして保存されます。

  • テーマのページ枠を決める
  • ブロックを作成する
  • ブロック内容を編集する

1.テーマのページ枠を決める

管理画面の[外観]-[Elastic Editor]を開き、初めにブログやホームページの全体枠を決めます。これは1度決めてしまうと同じテーマでは変更できないようです。

2.ブロックを作成する

下記添付のようにブロックを作成します。ブロックはCanvas上をドラッグすれば自動的に作成されます。また、各ブロックは「sidebar」「header」「footer」等ブロック要素が指定できます。

特に、「sidebar」は便利です。「sidebar」を指定すると[外観]-[ウィジェット]にサイドバー要素として表示されるので、任意のTEXTやHTML、RSS等設定できます。

【ブロックを作成】

上記画面の例では「ヘッダー(要素:sidebar)」「各メニュー(要素:sidebar)」「サイドバー(要素:sidebar)」「コンテンツ(要素:content)」「フッター(要素:footer)」としています。

3.ブロックを編集する

ブロック内容を編集します。

  • 「ヘッダー(要素:sidebar)」はウィジェットにテキストを入れ、画像リンクを付けます。
  • 「各メニュー(要素:sidebar)」は[外観]-[編集]のstyle.css最下部に各ブロックのスタイルが追記されているので、それを編集します。また、リンク先の設定は[外観]-[ウィジェット]から各メニューにリンク先のURLを「テキスト」ウィジェットで設定します。
  • 「フッター(要素:footer)」もメニュー同様にウィジェットで編集します。
  • それ以外の設定(トップの表示設定、コメント可否等)はwordpressの管理画面から[一般設定]等で行います。

【各メニューやfooterはウィジェットで管理される】

4.サンプル画像

上記編集を行っていくとこのようなページができあがりました。
  

参考サイト:
Moongift

投稿者: cova

ザムウ取締役CTO。2010年に大阪から香川へ移住しフリーランスSEとして活動をはじめる。領域としてWeb系から組込み系+サーバ構築。中小企業基盤整備機構にて中小企業の経営支援と、小学校にてICT講習を務める。2021年現在、子育て支援NPO理事、短大専任講師を兼任する。 【主な資格】経営学修士(MBA)修了、国家試験応用情報技術者、国内初の夫婦ITコーディネーター。 その他、2021年4月:2児(3歳・0歳)の父に就任。 #赤ちゃんから学ぶ経営学 を配信。