WordPressでdiv要素をウィジェットで簡単に編集可能にする設定方法

 

ホームページ制作をやっているみなさん、お客さんにWordPressの【テーマ編集】を見せていませんか？
PHPやCSSをお客さんに触っていただくことはリスクがあるので極力避けたいですよね。

そんな時にお客さんにもdiv要素内のみ簡単に編集可能にする方法をご紹介します。

弊社サイトにもありますが、上画像のリアルタイム受注欄をお客さんに編集してもらいたいとします。

なにも設定していないとお客さんにheader.phpを編集してもらわなくちゃいけませんよね。

functions.phpに記述するコード

<?php
if ( function_exists('register_sidebar') )
	register_sidebar();
//↑上記は既にテーマにあったら記述しなくてOK
//↓リアルタイム実績情報追加
 register_sidebar(array(
 'name' => 'リアルタイム実績',
 'id' => 'realtime',
 'description' => 'リアルタイム実績',
 'before_widget' => '<span>',
 'after_widget' => '</span>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
//ここまで

表示したい箇所に記述するコード

  <div class="realtime">
	<div class="inner"><?php dynamic_sidebar(realtime); ?></div>
  </div>

CSSに記述するコード

.realtime{
  background:#f8f8f8;
	padding:5px 0;
  }

.inner {
    margin: 0 auto;
    width: 960px;
}

これで「外観」→「ウィジェット」にリアルタイム実績欄が出来ます。