コンテンツへスキップ

カテゴリー: カスタマイズ

公開日 サイドバーの見出し変更 にコメントを残す

基本的なテーマができたので、カスタマイズを開始しました。

まず、サイドバーの見出しにバナー（自作）を付けました。

つぎに、サイドバーの項目（箇条書き）の、先頭にイメージファイルを設定しました。

スタイルシートの中は次のようになりました。

ローカルでテストして、結果を試してからスタイルシートをそっくりWebサイトに転送しています。
Webサイトでもテーマの編集は可能ですが、CSSで書いたものをすぐに確認できるという意味では、ローカルサイトがやりやすいです。

div#sidebar h2{
	font-size: 0.75em;
	color: #666666;
	padding-bottom: 8px;
	background-image: url(./images/titlebar.png);
	background-repeat: no-repeat;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
	padding-left:25px;
	padding-top: 4px;
}

公開日 カスタム背景画像 にコメントを残す

背景画像も管理画面から変更できるが、bodyタグを下記のように変更しなければならない。(3.3以降）

<body <?php body_class(); ?>>

function.php には、下記タグを追加

add_custom_background();

＜head＞＜/head＞の中に次の1行を追加する

<?php wp_head(); ?>

公開日 ヘッダー画像の変更 にコメントを残す

管理画面で自由にヘッダーを変更できるのが便利。挑戦してみたけどエラーで真白くなってしまい結構手こずってしまったので忘備録しておくことにした。
function.php で設定するのだが、ここで何度やっても真っ白けに。
そこで、日本語のコメントをすべてとってみたら、行けた。
ネット友のくりまんじゅうさんの素敵な写真をまたもや無断でお借りした(^^;
function.php の最後（？＞の前）に次ぎのようなタグを入れる。
カスタムヘッダーの機能を有効にするための設定だ。

add_custom_image_header('','admin_header_style');
function admin_header_style() {
?>
<style type="text/css">
#headimg {width: 900px!important}
</style>
<?php
}
define('NO_HEADER_TEXT',true);
define('HEADER_IMAGE','%s/default_header.jpg');
define('HEADER_IMAGE_WIDTH',900);
define('HEADER_IMAGE_HEIGHT',200);

次に、header.php の設定。
ここで、ヘッダー画像の場所を直接指定していたが、これを次のように変更する。

<p id="image"><img src="<?php header_image(); ?>"
alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>"
height="<?php echo HEADER_IMAGE_HEIGHT; ?>"/>
</p>

ヘッダーを変更する管理画面はこんなだ。

公開日 固定ページの作成 にコメントを残す

固定ページは、page.php というテンプレートを作って編集する。

index.php の内容をすべてコピーした後、サイドバーの段組みを削除して、1段組みにする。

さらにコメント部分や投稿情報なども削除する。

スタイルシートには次のように、横幅を広げる設定をする。

/*固定ページ*/
div#content.page {width: 100%}

公開日 テンプレートを分割 にコメントを残す

開始時は、メインインデックスとスタイルシートだけあればよかったのだけれど、固定ページを作成したりすると、ヘッダーやフッターは共有できるほうがよい。テンプレートも左図のように増えた。

そこで、index.php を分割して、header.php と footer.php を作った。その部分を index.php から移動してくるだけ。

index.php から、呼び出すには

<?php get_header(); ?>

のような、テンプレートタグを使う。

function.php はウィジェットを使うために必要なテンプレート。

1

公開日 フィードを自動検出させるには への1件のコメント

フィードを自動で検出させるためには、index.php の ヘッダー（head） の中に、次のようなタグを入れておきます。

さらに、フィードを表示させたい箇所（この場合はサイドバー）に、次のタグを入れます。

上で指定したfeedクラスは、スタイルシートでデザインをします。
文字サイズの指定や、アイコンなどです。説明省略(^^;

公開日 カレンダー にコメントを残す

サイドバーにカレンダーをつけてみました。
といっても、ウィジェットから選んだだけですけれど。
先には、横置きのFlashカレンダーをつけるつもりなので、デザインはあまり気にしないことにします。
プラグインを使わずにやれるところまでやっていきます。
もちろん初心者なので教科書は使っておりますが、デザインは自分用に変更しながら進んでおります。
そういえば、だいぶ前にphpでカレンダーを作ったことがあります。
投稿カレンダーにできないかなぁ･･

公開日 月別アーカイブ にコメントを残す

日付にちょっと手こずってしまいました。
ディフォルトで年月を表示すると「6月2012」のようになってしまうので、これを「2012年6月」のように表示しようしたらちとつまずいてしまいました。
原因は、パーマリンクの設定を変えていたからです。
その場合は次のようにタグを書きます。

<!--月ごとの場合-->
<?php if(is_month()): ?>
  <p id="pagetitle">
  <?php echo $year ,'年' . $monthnum .'月' ?></p>
<?php endif; ?>

こうすると、月ごとの記事を表示させたときにページの先頭に「○○年○○月」のように表示されます。
後ろに「～の記事」なんてつけてもいいかもしれません。
if()は、「月別アーカイブをクリックしたら」という条件式です。

公開日 ウィジェットを使うには にコメントを残す

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

<?php 
register_sidebar();
?>

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

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

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

公開日 2段組みに分ける にコメントを残す

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

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

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

＜テンプレート＞

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

＜スタイルシート＞

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