WordPressのwidgetにはHTMLを挿入・編集できるものがある。
ということは、そのwidgetを挿入した部分は容易にHTMLでデザインできるのでは?
と、いうことで、
任意の場所にwidgetを追加する方法は?
ということは、そのwidgetを挿入した部分は容易にHTMLでデザインできるのでは?
と、いうことで、
任意の場所にwidgetを追加する方法は?
まず…
functions.phpにwidgetを追加する関数を追記。
【if ( function_exists('register_sidebar') ){】が既にあれば、
ここから〜ここまでを必要分増やしてあげる。
ここから〜ここまでを必要分増やしてあげる。
widgetの数は増やした分だけ増える。その際、nameとidはそれぞれに与えてあげる。
if ( function_exists('register_sidebar') ){
//ここから
register_sidebar(array(
'name' => 'サイドバー2',
'id' => 'sidebar2',
'description' => 'ウィジェットエリアの説明',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
//ここまでをコピー
}
つぎに…
widgetを読み込みたい部分に下記を追記。
<?php dynamic_sidebar(sidebar2); ?>
以上。
因みに、スタイルを適応したい場合は、
CSSを増やして<div class="CSSの名前">〜</div>で囲んで
デザインを割り当ててあげる。
CSSを増やして<div class="CSSの名前">〜</div>で囲んで
デザインを割り当ててあげる。
画像などをwidgetを使って配置してみせる場合、
センターに配置するテーマを使用している場合は…
センターに配置するテーマを使用している場合は…
取りあえず、手っ取り早く下記の様なCSSで対応してみる。
.original-billboard { width: 1060px; margin: 0 auto;}
を追記。
これは、ビルボード用画像を1060px幅でセンターに配置(margin: 0 auto)してみた。
<div class="original-billboard">
<?php dynamic_sidebar(sidebar2); ?>
</div>
とindex.phpの適切な場所に記述すると、
ダッシュボードで追加したwidgetが記述した場所に表示される。
ダッシュボードで追加したwidgetが記述した場所に表示される。
今回はトップにビルボード画像を追加し、widget管理画面で変更等を進めていこう思う。
widgetのデフォルトに、『テキスト・HTMLを追加』的なwidgetがあるので、
widget『サイドバー2』に追加し、
widget『サイドバー2』に追加し、
HTMLで記述。
<img src="アドレス" alt="写真" align="top">とザクッと入力しておけば取りあえず完成。
流れをかいつまんでまとめると、
1,functions.phpにwidgetを追加する関数を追記
2.表示させたい場所、php書類に読み込むためのソースを記述
3.読み込んだwidgetをデザインするためのcss記述
4.widget管理画面でwidgetを挿入し、HTMLなどで記事を記述
とこんな感じ。
あくまでも、深く考えずに簡単にWordPressテンプレートにデザインを追加する方法。
個人的なメモなので、あまり参考にしない。
兎に角、作業中はサーバのデータをしっかりバックアップをとる!
ちょっと間違えると真っ白のアクセス不能のサイトになる…
兎に角、作業中はサーバのデータをしっかりバックアップをとる!
ちょっと間違えると真っ白のアクセス不能のサイトになる…