WordPress実験中！ – ページ 9 – テーマ作成にチャレンジしています

ウィジェットを使うには

千絵2012年6月16日にコメントを残す

WordPressには、ウィジェットという機能があります。これを利用すると、パーツから必要なものをドラッグするだけでサイドバーにメニューを表示することができます。ウィジェットを利用するためには、functions.php というテンプレートが必要です。
このphpを作って、次のようなタグを入力するとウィジェットが使えるようになります。

<?php 
register_sidebar();
?>

index.phpのサイドバーのウィジェットエリアには、次のようなタグを入れます。

<div id="sidebar">
<?php dynamic_sidebar(); ?>
</div>

dynamic_sidebar は、タイトルが見出し2（H2)、メニューが箇条書き（UL）でマークアップされています。
だけど、初期値ではなんとも恰好が悪いです。
これを自分の好みにデザインしていきます。

2段組みに分ける

千絵2012年6月16日にコメントを残す

写真の挿入を考え少し大き目に横幅をとったので、左右を648と250に分けました。

一般的なテンプレートとまったく同じで、大段落（コンテナ）の下にメイン記事（コンテンツ）を置き、その下にサイドバー（右）を置きます。

幅はスタイルシートで設定するので、テンプレートにはスタイルシートのidを入れます。
このサイドバーの中に、これからいろいろな設定を入れていきます。

＜テンプレート＞

<div id="sidebar">
</div>

＜スタイルシート＞

/*記事の段落*/
div#content {width:648px;
float: left}
/*サイドバー*/
div#sidebar {width: 250px;
float: right}

画像にキャプションをつける

千絵2012年6月16日にコメントを残す

画像にキャプションをつけてみました。
スタイルは下記のように

.wp-caption {border: solid 1px #aaaaaa;
text-align: center;
padding-top: 5px}

画像の編集は挿入した後からでも編集が可能です。
画像をクリックして出てくる画面の「画像を編集」ボタンをクリックし、変更してから「更新」をクリックします。

回り込み解除

千絵2012年6月16日2012年10月6日にコメントを残す

投稿情報（この例ではカテゴリ）の回り込みの解除をしておかないと、投稿情報が右に回り込んだままになります。
これを解除するには、投稿情報のところで、回り込みの解除を指定します。

/*投稿情報*/
p.postinfo {color:#808080;
font-weight: bold;
text-align: rignt;
margin: 20px 0 0;
clear: both}

プラグインを使って、ソーシャルボタンを下位に表示させるようにしたので、画像をアップロードすると回り込んでしまいましたので、次のスタイルを、スタイルシートに追加しました。

.wp_social_bookmarking_light{clear: both}

画像を左右に表示する

千絵2012年6月16日にコメントを残す

本文に画像を表示するには、画像の配置を「左」や「右」に指定します。
スタイルシートは次のように設定します。

.alignleft {float: left;
margin-right:10px;
margin-bottom: 10px}

.alignright {float: right;
margin-left: 10px;
margin-bottom: 10px}

記事の段落の右端に余白がいりますね。ついでになおしておきます。

/*記事の段落*/
div.post {margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}

トップページの作成

千絵2012年6月14日2012年8月25日にコメントを残す

本を見ながらですが、サイトを1個作りましたので、次はカスタマイズなるものに挑戦しようと思います。
テーマフォルダを作ったら、最初に必要なのは、「index.html」と「style.css」ですが、これを公開したサーバーから編集することができます。
テーマの「編集」をクリックすると、右側にリンクが現れるのでこれを選択して、編集画面を表示させます。

こんな感じです。
「index.php」には、コンテンツタイプとエンコードの種類を入れておきます。
DreamWeaverなら「ファイル」→「新規」→「HTMLテンプレート」をクリックすると、勝手に作ってくれます。

面倒くさがりなので、なるべく手抜きをしようかと(＾＾;

ブログ名を表示するには<?php bloginfo('name'); ?>と記述します。
<body>直下に入れてみると、Oh！ブログ名が表示されました。

ついでにディスクリプションは、<?php bloginfo('description'); ?>
これを表示させただけでも、「私のテーマだ～」ってな気分に浸れますわ(＾＾;
スタイルを作ってあげればちょっとは見栄えよくできますものね。

余談ですが、テンプレートを直接編集するよりは、自分のPCでやったほうがいいような気がします。エディターによっては（DreamWeaverや秀丸）、phpのコードを色付けしてくれるので、エラーとかの発見がし易いです。DreamWeaverだと、サイトを構築しておけば、ボタン１つでアップロードしておけるし、結構便利だす。（パーミッションには要注意）

ソーシャルボタンをつける

千絵2012年6月13日2012年6月13日にコメントを残す

投稿記事に対してだけですが、たくさんのソーシャルボタンをつけました。
実験なのでいろいろやっています。
方法は、それぞれのサイト（ツィッターやFaceBookなど）に行って、コードを取得してテンプレートに貼り付けるという作業です。
FacebookのLikeボタン
 Twitterボタン
 ＋１ボタン（Google)
はてなブックマーク

上記ボタンを設置するための、専用のてんプレートを作りました。
といっても先生（本）がいるわけでして、私の力ではありません。
「WordPressの教科書」という本が最初の先生です。サイト構築本なのでちとハードルが高く、理解しようとせずに、言われるがままに進んでいます。

CSSを確認するには

千絵2012年6月11日2012年6月11日にコメントを残す

https://addons.mozilla.org/ja/firefox/addon/firebug/

Firefoxのアドオンです。
上記のサイトへ行くと、Firebugというアドオンをダウンロードできますので、これをインストールします。
Firefoxを再起動すると、右上にアイコンが表示されますので、これをクリックしてから、ページ上の確認した場所をクリックします。

こんなふうな感じで、CSSを表示することができます。便利ですね。
ローカルでサイトを作る実験をしていますが、質問には答えられません。
何をやっているのか自分でもちっともわかってないからです(^^;
わかったのは、ブラウザは、IEよりもFirefoxのほうが向いているということぐらいかしら？