WordPress memo

/ 2014/10/03 /
WordPressのwidgetにはHTMLを挿入・編集できるものがある。
ということは、そのwidgetを挿入した部分は容易にHTMLでデザインできるのでは?

と、いうことで、
任意の場所にwidgetを追加する方法は?

まず…

functions.phpにwidgetを追加する関数を追記。
if ( function_exists('register_sidebar') ){】が既にあれば、
ここから〜ここまでを必要分増やしてあげる。
widgetの数は増やした分だけ増える。その際、nameidはそれぞれに与えてあげる。



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>で囲んで
デザインを割り当ててあげる。


画像などを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のデフォルトに、『テキスト・HTMLを追加』的なwidgetがあるので、
widget『サイドバー2』に追加し、
HTMLで記述。
<img src="アドレス" alt="写真" align="top">とザクッと入力しておけば取りあえず完成。

流れをかいつまんでまとめると、

1,functions.phpにwidgetを追加する関数を追記
2.表示させたい場所、php書類に読み込むためのソースを記述
3.読み込んだwidgetをデザインするためのcss記述
4.widget管理画面でwidgetを挿入し、HTMLなどで記事を記述

とこんな感じ。

あくまでも、深く考えずに簡単にWordPressテンプレートにデザインを追加する方法。
個人的なメモなので、あまり参考にしない。

兎に角、作業中はサーバのデータをしっかりバックアップをとる!
ちょっと間違えると真っ白のアクセス不能のサイトになる…

Design Labels

 
Copyright © 2010 Cave Graphic LAB, All rights reserved
Design by DZignine. Powered by Blogger