WordPressでサイドバーを表示する

WordPressでテーマの作成/その8

コンテンツ部分の右側にサイドバーを表示したいと思います。サイドバーに表示するメニューがウィジェットの機能を利用して管理画面で選択できるようにします。現状では、『外観』→『ウィジェット』をクリックしても、下記のように表示されています。

『functions.php』にサイドバー用のウィジェットの機能を有効にするために『register_sidebar();』を追加して、『外観』→『ウィジェット』をクリックすると下記のようにウィジェットが利用できるようになります。

それでは、まず現状のコンテンツ部分の横幅を600pxに指定して、右側にサイドバーを入れることができるようにします。『style.css』に下記のタグを挿入します。

div#content	{
	width: 600px;
	float: left}

『home.php』ファイルを開き、サイドバーを表示するための関数『<?php get_sidebar();?>』をフッターの手前に挿入します。尚、『wp-content/themes/winroad theme』フォルダにサイドバー用のカスタムパーツテンプレート『sidebar.php』を作成し、下記のコードを入力します。

<!-- サイドバー -->
<div id="sidebar">
<ul>
<?php dynamic_sidebar(); ?>
</ul>
</div><!-- /サイドバー -->

ダッシュボードの『外観』→『ウィジェット』を選択すると、サイドバーに表示したいウィジェットを左側の『利用できるウィジェット』から選び、右側のウィジェットエリア『サイドバー1』に追加していきます。今回は、『最近の投稿』『カレンダー』『カテゴリー』『アーカイブ』の4つのメニューを追加します。

ブラウザで確認してみましょう。サイドバーのスタイルを指定していませんので、表示がちょっとおかしいです。

サイドバーのデザインを指定する

それでは、サイドバーのデザインを指定したいと思います。『style.css』に下記のタグを追加します。

/* サイドバー */
div#sidebar	{
	width: 300px;		/*サイドバーの横幅を300pxに指定*/
	float: right}		/*右側配置に指定*/

div#sidebar ul	{
	margin: 0;			/*メニュー周りの余白を削除*/
	padding: 0;
	list-style-type: none}	/*リストマークを削除*/

div#sidebar .widget	{margin-bottom: 20px}	/*メニューの間隔を20pxに指定*/

div#sidebar h2	{
	font-size: 0.75em;	/*見出しの文字サイズを0.75emに指定*/
	color: #ffffff;		/*見出しの文字色を白色に指定*/
	background-color: #0c8bcd;	/*背景色を青色に指定*/
	border-radius: 3px;	/*背景を3pxの角丸に指定*/
	padding: 2px 10px;	/*バーの内側の上下余白を2px、左右余白を10pxに指定*/
	margin: 0}			/*周りの余白を削除*/

div#sidebar li li	{
	font-size: 0.7em;	/*リンクの文字サイズを0.7emに指定*/
	border-bottom: dotted 1px #aaaaaa;	/*リンクの下に1pxのグレー点線を挿入*/
	margin: 0}			/*リンク周りの余白を削除*/

div#sidebar li li a	{
	color: #000000;		/*リンクの文字色を黒に指定*/
	display: block;		/*リンクをブロック要素として指定*/
	padding: 5px 10px}	/*上下の間隔を5px、左右の間隔を10pxに指定*/

div#sidebar li li a:hover	{
	background-color: #f7e29e}	/*リンクを重ねたときの背景色をオレンジ色に指定*/

/* カレンダー */
#wp-calendar	{
	font-size:0.85em;	/*カレンダーの文字サイズを0.85emに指定*/
	margin:auto;		/*中央に配置*/
	margin-top:20px;	/*上部余白を20pxに指定*/
	margin-bottom:-30px;/*下部余白を-30pxに指定*/
	width : 80%;		/*横幅を80%に指定*/
	text-align:center;}	/*日付文字を中央に配置*/

それでは、ブラウザで確認してみましょう。

本日のWordPress関数

get_sidebar()

あるテンプレートにサイドバー部分のテンプレートを組み込みたいときに使う関数です。サイドバー用のテンプレートの名前に接尾語をつけ、組み込み先のテンプレートに応じて、サイドバー用のテンプレートを使い分けることもできます。たとえば、『sidebar-index.php』というテンプレートを組み込みたいときは、組み込み先のテンプレートに『<?php gent_sidebar(‘index’);?>』と記載します。

dynamic_sidebar()

register_sidebar関数で登録したサイドバーを出力するための関数です。サイドバーを複数登録した場合は、パラメータとしてサイドバーの名前を指定します。サイドバーが未登録や、登録されていてもその中にウィジェットを1つも入れていない場合はdyanamic_sidebar関数は何も出力せず、関数の戻り値はFALSEになります。

本日は以上です。

タグ

WordPressで過去記事のリンクを作成する

WordPressでテーマの作成/その7

トップページには、『設定』→『表示設定』の『1ページに表示する最大投稿数』で指定された件数の記事を表示しますが、複数のページに分けて過去記事も表示できるようにしたいと思います。1ページに表示する最大投稿数はデフォルトでは10ですが、このテストサイトでは、5件しか投稿記事がありませんので、最大投稿数を2に変更しておきます。

まず、『wp-content/themes/winroad theme』フォルダに、ページネーション用のカスタムパーツテンプレート『pagenation.php』ファイルを作成し、下記のコードを入力します。

<p class="pagenation">
<span class="oldpage"><?php next_posts_link('« 古い記事'); ?></span>
<span class="newpage"><?php previous_posts_link('新しい記事 »'); ?></span>
</p>

次に、『home.php』ファイルを下記のように変更します。

<?php get_header(); ?>

<!-- コンテンツ -->
<div id="content">
<p class="title">投稿記事</p>

<?php if(have_posts()): while(have_posts()):
the_post(); ?>
	<?php get_template_part('content'); ?>
<?php endwhile; endif; ?>

<!-- ページネーション -->
<?php get_template_part('pagenation');?>
<!-- /ページネーション -->
</div>
<!-- /コンテンツ -->

<?php get_footer(); ?>

ページネーションもスタイルシートでデザインを指定しやすいようにコンテンツグループの中に入れておきました。

それではブラウザで確認してみます。

リンクのデザインを指定する

『style.css』ファイルに下記のタグを追加します。

/* ページネーション */
p.pagenation	{
	font-size: 0.7em;	/*リンクの文字サイズを0.7emに指定*/
	overflow: hidden}	/*コンテンツの回り込み禁止*/

span.oldpage	{
	float: left}	/*古い記事のリンクを左揃え*/

span.newpage	{
	float: right}	/*新しい記事のリンクを右揃え*/

それでは、再度ブラウザで確認してみます。

本日は以上です。

タグ

WordPressで記事のデザインを設定する

WordPressでテーマの作成/その6

今日は、『style.css』に設定を追加して、記事のデザインを指定します。

/* 記事 */
div.post	{
	margin-bottom: 30px;	/*記事の下の間隔を30pxに指定*/
	overflow: hidden}		/*記事の回り込みを解除する指定*/

div.post h2	{
	border-top: solid 1px #aaaaaa;	/*タイトルの上に1pxのグレーの罫線を表示*/
	border-bottom: solid 1px #aaaaaa;	/*タイトルの下に1pxのグレーの罫線を表示*/
	border-left: solid 10px #0c8bcd; /*タイトルの左に10pxの青の罫線を表示*/
	font-size: 0.85em;				/*フォントサイズを0.85emに指定*/
	padding: 10px 18px;				/*上下の余白を10px、18pxに指定*/
	margin: 0}						/*マージンを0に指定*/

div.post h2 a	{color: #000000}	/*記事のリンクの色を黒に指定*/

div.post p	{
	font-size: 0.85em;	/*記事の本文の文字サイズを0.85emに指定*/
	line-height: 1.6}	/*記事の本文の行の高さを1.6倍に指定*/

div.post p.postcat	{
	text-align: right;	/*カテゴリーを右揃え*/
	margin: -10px 10px 10px 0}	/*上に-10px移動、右と下に10px余白指定*/

div.post p.postcat a	{
	font-size: smaller;		/*フォントサイズを一回り小さく*/
	background-color: #a7d043;	/*背景を緑色に指定*/
	border-radius: 2px;		/*背景を2pxの角丸で指定*/
	color: #ffffff;			/*文字色を白色にして*/
	padding: 1px 5px}		/*上下の余白1px、左右の余白5pxに指定*/

div.post p.postinfo	{
	font-size:0.6em;	/*日付の文字サイズを0.6emに指定*/
	color: #0c8bcd;			/*投稿年月日の文字色を青色に指定*/
	text-align: right;		/*右揃えに指定*/
	margin: -30px 10px 10px 0;	/*表示位置を上に30px移動、右と下に10pxの余白指定*/
	}				

/* 記事内の画像の配置設定 */
.aligncenter	{
	display: block;
	margin-left: auto;
	margin-right: auto}

.alignnone	{
	display: block;
	margin-left: auto;
	margin-right: auto}

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

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

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

それでは、ブラウザで確認してみます。

本日は、ここまでにします。

タグ

WordPressで記事の表示

WordPressでテーマの作成/その5

今日は、いよいよトップページに最新の記事を表示します。『home.php』ファイルを開き、ヘッダーとフッターの間に下記のコードを入力します。

<!-- コンテンツ -->
<div id="content">
<p class="title">投稿記事</p>

<?php if(have_posts()): while(have_posts()):
the_post(); ?>
	<?php get_template_part('content'); ?>
<?php endwhile; endif; ?>
<!-- /コンテンツ -->

次に、新たに『wp-content/themes/winroad theme』フォルダに『content.php』ファイルを作成し、下記のコードを入力します。

<div class="post">

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

</div>

ブラウザで確認してみます。初期設定では、記事は1件しか入力されていませんので、私の古い記事から3件ほど入力しています。

次に、記事のタイトル以外に、カテゴリー、本文、投稿年月日も表示するようにします。『content.php』ファイルを開き、タイトルの下に、下記のコードを入力します。

<p class="postinfo"><?php the_date(); ?></p>
<p class="postcat"><?php the_category(' '); ?></p>
<?php the_content(); ?>

それでは、ブラウザで確認してみます。

本日使用した関数の解説

have_posts()

この関数は、投稿があるとかどうかを判断する関数です。この関数には、パラメータがありません。戻り値は、出力すべき投稿や固定ページがあるかどうかを表す値になります(TRUE、FALSE)。

the_post()

この関数は、読み込まれた投稿や固定ページから1件が取り出され、必要な準備が行われて、データを出力できる状態になります。

get_template_part()

これは、WordPress3.0以降に追加された関数で、あるテンプレートをほかのテンプレートに組み込む関数です。この関数を使えば、任意のテンプレートを他のテンプレートに組み込むことができます。つまり、『home.php』のテンプレートに『content.php』というテンプレートを組み込むことを表します。また、2つ目のパラメータ(名前)も指定することができます。つまり、『スラッグ-名前.php』のテンプレートがあれば、それを組み込み、なければ『スラッグ.php』のテンプレートを組み込むことになります。
たとえば、『get_template_part(‘content’,’a’)』は、『content-a.php』テンプレートがあればそれを組み込み、なければ『content.php』ファイルを 組み込みます。

the_permalink()

個々の投稿のページには、アドレスが自動的に割り振られますが、その割り振られたアドレスを表示するためには、この関数(テンプレートタグ)を使います。この関数にはパラメータはありません。

the_title()

投稿(固定ページ)のタイトルを出力するための関数です。タイトルの前後に何らかの文字列(HTMLのタグなど)を出力するには、それらの文字列を『the_title』タグのパラメータとして指定します。たとえば、タイトルの前後を『<h2>』『</h2>』で囲む場合、『the_title(‘<h2>’,'</h2>’)』と書きます。
また、the_title関数を出力せずに、PHPプログラムの 中で使う場合は、第3パラメータに『false』を指定します。その際、1番目と2番目のパラメータに何も指定しなければ、それぞれ、『”』(空白)を指定します。つまり、次のように使用します。『$tilte=the_tile(”,”,false)』

the_date()

基本的に投稿日付を出力します。the_date関数は、4つのパラメータを指定することができます。1つ目のパラメータは、日時の初期を指定する文字列を指定します。指定しなければ、WordPressのダッシュボートの『設定』→『一般』→『日付フォーマット』の設定に従います。2つ目のパラメータでは、日付の前後に出力する文字列を指定します。4つ目のパラメータは結果をそのまま出力するか、戻り値として返すかを指定します。trueを指定すると、結果が出力され、falseをしてすると戻り値が返されます。

the_category()

カテゴリーの情報を出力します。パラメータを指定しない場合は、順番なしリスト(ul/li要素)で出力されます。1つ目のパラメータには、個々のカテゴリーを区切る文字(セパレータ)を指定することができます。この場合、カテゴリーの一覧はul/li要素では囲まれません。2つ目のパラメータには、『multiple』または『single』を指定します。『multiple』は、投稿が直接的に属するカテゴリーだけでなく、それらの上位カテゴリーへのリンクも出力されます。『single』は、投稿が直接的に属するカテゴリーとその親のカテゴリーの名前をセパレータで挟んで繋ぎ、その全体をリンクとします。3つ目のパラメータとして投稿のIDを指定すると、そのIDの投稿が属するカテゴリーが出力されます。

the_content()

投稿(固定ページ)の本文を出力する関数です。投稿の本文中に『<!–more–>』のコメントを入れると、その位置で本文の前半と後半に区切ることができます。たとえば、メインページなど複数の投稿が表示されるページでは、その後、『(続きを読む…)』のリンクが出力されます。『(続きを読む…)』の文字列を変更するには、the_content関数の1つめのパラメータに変更したい文字列を指定します。

本日は以上です。

タグ

WordPressでヘッダー画像の追加

WordPressでテーマの作成/その4

今日は、ナビゲーションバーの下にヘッダー画像を挿入したいと思います。

ヘッダー画像を表示する

今回もカスタムヘッダーの機能を利用してヘッダー画像を表示します。『functions.php』ファイルを開き、カスタムメニューの次に下記のコードを入力します。

//カスタムヘッダー
add_custom_image_header('','admin_header_style');
function admin_header_style() {}

define('NO_HEADER_TEXT',true);
define('HEADER_IMAGE','%s/header_imaage.jpg');
define('HEADER_IMAGE_WIDTH',920);
define('HEADER_IMAGE_HEIGHT',250);

『header.php』ファイルを開き、ナビゲーションバーの下にコードを追加します。

<!-- ヘッダー画像 -->
<?php if(get_header_image()): ?>
<div id="image"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></div>
<?php endif; ?>
<!-- /ヘッダー画像 -->

ダッシュボードを開き、『外観』→『ヘッダー』を開き、自分のコンピュータからあらかじめ用意しておいた920×250ピクセルの画像を選択し、『アップロード』ボタンをクリックすると、画像(相変わらず夜景好きの私は、またもレインボーブリッジの画像です)がアップされます。

それでは、ブラウザで確認してみましょう。

コードの解説

それでは、今日のコードを解説していきたいと思います。

add_custom_image_header()

これは、カスタムヘッダー機能をONにする関数です。カスタムヘッダーを動作させるためには、以下の4つの定数を定義する必要があります。

define(‘HEADER_TEXT_COLOR’,’文字色’);
define(‘HEADER_IMAGE’,’%s/デフォルトのヘッダー画像のパス’);
define(‘HEADER_IMAGE_WIDTH’,ヘッダー画像の幅);
define(‘HEADER_IMAGE_HEIGHT’,ヘッダー画像の高さ);

尚今回は、『define(‘HEADER_TEXT_COLOR’,’文字色’);』ではなくて、

define(‘NO_HEADER_TEXT’,true);

を使用しています。この違いは何でしょうか。

『define(‘HEADER_TEXT_COLOR’,’文字色’);』は、画像の中に文字を表示し、『define(‘NO_HEADER_TEXT’,true);』は、非表示であると言うことです。

header_image()

この関数は、カスタムヘッダーの画像のアドレスを出力します。

本日はここまでにします。

タグ

WordPressでナビゲーションバーの追加

WordPressでテーマの作成/その3

今日は、ナビゲーションバーを挿入したいと思います。ナビゲーションバーはカスタムメニューの機能を利用して表示します。

カスタムメニューとは、WordPress3.0から取り入れられた機能で、固定ページの順番を変えたり、サブメニューを作成したり、ナビゲーションメニューにカテゴリーを指定することで、、複数の記事を表示することができるようになりました。

カスタムメニューの設定

カスタムメニューを利用するには、『functions.php』ファイルが必要ですので、『wp-content/themes/winroad theme』フォルダに『functions.php』ファイルを作成し、下記のコードを入力します。

<?php
//カスタムメニュー
register_nav_menus(array(
	'navigation' => 'ナビゲーションバー'
	));

?>

『header.php』にも、下記のコードを追加します。

<div id="nav">
<?php wp_nav_menu(array(
	'theme_location' => 'navigation'
	));?>
</div>

次に、管理画面で、『外観』→『メニュー』と選択し、メニューの名前を『topmenu』として、『メニューを作成する』ボタンをクリックします。固定ページの全て表示タブをクリックし、下の全て選択して、メニューに追加をクリックします。

ブラウザで確認してみます。

ナビゲーションバーのデザインを指定する

『style.css』を開き、ナビゲーションバーの設定を追加します。

/* ナビゲーションバー */
div#nav	{font-size: 0.75em;		/*文字サイズを0.75emに指定*/
	height: 30px;				/*バーの高さを30pxに指定*/
	background-color: #ffffff;	/*背景色を白色に指定*/
	border: solid 1px #aaaaaa;	/*バーの周りに1pxのグレーの罫線を表示*/
	margin-bottom: 8px}			/*バーの下の余白を8pxに指定*/

div#nav ul	{margin: 0;			/*ulの周りの余白を削除*/
	padding: 0}

div#nav li	{list-style-type: none;	/*リストマークを削除*/
	float: left}					/*リンクを横並びに指定*/

div#nav li a	{display: block;	/*リンクをブロック要素として表示*/
	width: 150px;					/*リンクの横幅を150pxに指定*/
	line-height: 30px;				/*リンクの高さを30pxに指定*/
	border-right: solid 1px #aaaaaa;	/*リンクの区切りを1pxのグレー線に指定*/
	color: #000000;					/*リンクの文字色を黒色に指定*/
	text-align: center}				/*リンクの文字を中央揃えに指定*/

div#nav li a:hover	{background-color:#00F;	/*リンクにカーソルを重ねたときの背景色を青色に指定*/
	color:#FFFFFF}					/*リンクの文字色を白色に指定*/

それでは、ブラウザで確認してみましょう。

本日のWordPress関数

register_nav_menus()

カスタムメニューを使うための関数です。パラメータとして連想配列を渡し、個々の要素のキーは、カスタムメニューを識別する名前を指定します(名前は英数字やアンダースコアで指定)。また、要素の値として、管理画面上に表示するカスタムメニューのラベルを指定します。連想配列に複数の要素を入れれば、その数だけカスタムメニューを登録でき、ページの種類に応じて、複数のカスタムメニューを使い分けることができます。

wp_nav_menu()

登録したカスタムメニューをページに出力するための関数です。パラメータで動作をカスタマイズすることができます。パラメータが多いので、連想配列で指定します。パラメータを下記に表示します。

  • ‘memu’=>名前  出力するメニューの名前(メニューの設定ページで設定した値)
  • ‘theme_location’=>名前  register_nav_menus関数で登録した名前
  • ‘container’=>タグ名  メニューのul要素を囲む要素のタグ名。標準では、『div』か『nav』のどちらかを指定
  • ‘container_id’=>ID  メニューのul要素を囲む要素に割り当てるID
  • ‘container_class’=>クラス名  メニューのul要素に割り当てるクラス名
  • ‘before’=>文字列  リンクの前に出力する文字列
  • ‘after’=>文字列  リンクの後に出力する文字列
  • ‘link_before’=>文字列  リンク対象文字列の前に出力する文字列
  • ‘link_after’=>文字列  リンク対象文字列の後に出力する文字列
  • ‘depth’=>深さ  出力するメニューの階層の上限。0を指定すると全階層を出力
  • fallback_cb’=>関数名  メニューが存在しないときに出力する関数名
  • ‘echo’=>trueまたはfalse  falseにすると、結果のHTMLを出力せずに、戻り値として返す

 

本日は以上です。

タグ

WordPressのスタイルシートの基本設定

WordPressでテーマの作成/その2

今日は、前回作成したヘッダーとフッターにCSSを適用してみたいと思います。『style.css』ファイルを開き、まず最初にこのテーマの説明を記述します。

@charset "UTF-8";
/*
Theme Name: WinRoad徒然草
Theme URI: http://w.builwing.info/
Description: 新規作成のためのテーマ
Author: nakada
Author URI: http://w.builwing.info/
Version: 1.0
General comments/License Free.
*/

ブラウザ固有のCSSのリセット

次に、ブラウザ固有のCSSをリセットします。

/*------------------------------------------------------------
ブラウザ固有のCSSをリセット
-------------------------------------------------------------*/

body,div,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,p,blockquote{
	margin: 0;
	padding: 0;
}

address,caption,cite,code,dfn,h1,h2,h3,h4,var{
	font-style: normal;
	font-weight: normal;
}

h1,h2,h3,h4,h5,h6,small{
	font-size: 100%;
	font-weight: normal;
}

fieldset,img,abbr{ border: 0; }
caption{ text-align: left; }
q:before,q:after{ content: ''; }
a{ text-decoration: none; }
img{
	border: none;
	vertical-align: bottom;
}

input,
textarea,
select{
	font-size: 1em;
}

/*WordPress対策*/
span textarea,span input{ vertical-align: bottom!important; }

/*Firefox対策*/
html{
	overflow: scroll;
	overflow: -moz-scrollbars-vertical;
	overflow-x: scroll;
}

body,x:-moz-broken { margin-left:-1px; }

文字とリンクの基本設定

次に、ページ全体の文字とリンクの基本設定をします。

/* 基本 */
body	{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif}

a		{text-decoration:none;	/*リンク部分の下線を削除*/
		color:#09F}				/*リンク部分の色を水色に変更*/
a img	{border:none}			/*リンクを設定した画像周りの罫線を削除*/

表示サイズの指定

サイト全体の横幅とヘッダーとフッターのデザインを指定します。iphoneでは、画面の横幅が980ピクセルとして処理されますので、スマートフォンで表示してもバランスよく表示できるように、920ピクセルとします。

/* コンテナ */
div#container	{width: 920px;	/*コンテナ部分を920pxに指定*/
				margin: auto}	/*コンテナ部分を中央に配置*/

/* ヘッダー */
div#header	{font-family:Verdana, Geneva, sans-serif;	/*ヘッダーのフォント指定*/
			margin-bottom: 20px}	/*ヘッダーの下の余白を20pxに指定*/

div#header h1	{font-size: 2.0em;	/*サイト名のフォントサイズを2.5emに指定*/
				margin: 0}			/*サイト名の周りの余白を削除*/

div#header h1 a	{color:#00F}		/*サイト名のリンク色を青に指定*/

div#header p#desc	{font-size: 1em;/*サイトの説明の文字サイズを1emに指定*/
				text-align:right;	/*サイトの説明を右揃えに指定*/
				font-weight: bold;	/*サイトの説明を太字に指定*/
				color: #999999;		/*サイトの説明の文字色をグレーに指定*/
				margin: 0 0 5px}	/*余白を削除、下のみ5pxに指定*/

/* フッター */
div#footer	{border-top: solid 1px #aaaaaa;	/*フッターの上部に1pxのグレーの罫線を挿入*/
			padding: 6px 0;			/*罫線の下の余白を6pxに指定*/
			clear: both}			/*フッターの回り込み禁止指定*/

div#footer p	{font-size: 0.75em;	/*コピーライトの文字サイズを0.75emに指定*/
				font-style: normal;	/*斜体を解除*/
	font-family: Verdana, sans-serif;	/*フォントの指定*/
				margin: 0}			/*周りの余白を削除*/

それでは、ブラウザで確認してみます。下記のようになりました。

本日は以上です。

タグ

WordPressでテーマの作成

WordPressを勉強し直すには、『急がば回れ』で、テーマ自体をゼロから作るのが一番いいと思いました。それでは、今日から、WordPressのテーマをゼロから作成していきたいと思います。まず、最初に空のPHPファイルをいくつか用意します。WordPressはブラウザ上でもファイルの操作はできるのですが、やはり使い勝手が悪いので、Dreamweaverで作成していきたいと思います。DreamweaverでWordPressを操作するための設定が、わからない方は、は、『WordPressでマルチサイト機能を利用する』をご覧下さい。

尚、作業を始める前に必ず、リモートサーバーからローカルに全ファイルをダウンロードしてから始めて下さい。ローカルフォルダの古いデータでリモートサーバーを間違えて更新しないためには、必要です。

それでは、『wp-contents/themes』フォルダを右クリックして、新規フォルダを作成し、フォルダ名を『Winroad them(任意)』と入力します。

基本ファイルの作成

次に、基本となるファイルを作成します。中身は空で構いません。ここでは、最低限必要な『index.php』『header.php』『footer.php』『home.php』『page.php』『single.php』『style.css』の7つを作成します。

次に、あらかじめ作成し、用意しておいた300×225の『screenshot.png』も同じフォルダ内に保存します。保存したら、いったんサーバーにアップします。尚、下の画像では、『screenshot.jpg』になっていますが、jpgファイルでは表示されませんでしたので、pngファイルに変更しました。

下記のようにテーマが表示されました。只、現状では、中身が何もありませんので 『サイトを表示する』をクリックしても何も表示されません。

ヘッダーファイルの作成

それでは、『header.php』ファイルを開き、『ファイル』→『変換』→『HTML5』と入力します。

タイトルの『無題ドキュメント』をクリックし、プロパティのタイトルに

<?php bloginfo(‘name’);?><?php wp_title();?>

と入力します。

次に、</title>の後に、

<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’); ?>” type=”text/css” />

と入力します。ついでに文字コードの指定も変更しておきました。WordPressの文字コードは推奨が『UTF-8』ですので、元のままでも構わないのですが、『utf-8』以外で、Wordpressを設定していた場合、文字化けが起きるのを防ぐため<?php bloginfo(‘charset’);?>に変更しました。<body>の後の</body>と</html>を削除します。

<body>の下に、下記のコードを入力します。

<!-- コンテナ --> <div id="container">
<!-- ヘッダー --> <div id="header">
<h1><a href="<?php echo home_url(); ?>">
<?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>
</div>

フッターファイルの作成

次に、『footer.php』ファイルを開き、下記のコードを入力します。

<!-- フッター -->
<div id="footer">
<p>Copyright © <?php bloginfo('name'); ?>, All rights reserved.</p>
</div>

</div>
</body>
</html>

次に、『home.php』ファイルを開き、下記のコードを入力します。

<?php get_header(); ?>
<?php get_footer(); ?>

全てのファイルをサーバーにアップして、ブラウザで確認してみましょう。下記のように表示されました。

コードの解説

それでは、今日使用したWordPress関数を調べてみましょう。

bloginfo()

これは、一番基本的な関数だと思います。使用中のWordPressブログに関する様々な情報を出力します。()内の引数により、いろいろな情報を表示します。それでは、順番に見ていきましょう。

  • name   ダッシュボードの『一般設定』で指定したブログのタイトル
  • description   同じく『一般設定』で指定したブログの説明文
  • charset  ダッシュボードの『表示設定』で指定された文字コード
  • url   ブログのサイトURL
  • stylesheet_url  使用中のメインCSSのURL
  • admin_email   ダッシュボードの『一般設定』で指定した管理人のメールアドレス
  • version  現在使用中のWordPressのバージョン
  • html_tyle  ”Content-type”の設定値

他にも色々ありますが、とりあえず覚えておきたいのは、この辺でしょうか。

 wp_title()

現在のページのタイトルを表示、又は取得します。区切り文字を定義でき、WordPress2.5以上では、タイトルの前/後のどちらかに表示することができます。

<?php bloginfo(‘name’);?><?php wp_tilte(‘–‘);?>とすると、『WinRoad徒然草–今日のテーマ』と表示されますし、

<?php wp_title(‘–,true,’right’);?><?php bloginfo(‘name’);?>とすると、『今日のテーマ–WinRoad徒然草』と表示されます。

home_url()

現在のブログのホームURLを返します。任意のブログのURLを取得するには、『get_home_url()』を使用します。

 get_header()

この関数は、現在のテーマディレクトリから header.php ファイルを読み込みます。このファイルがないときは、代わりに wp-content/themes/default/header.php を読み込みます。

get_footer()

この関数は、現在のテーマディレクトリから sidebar.php ファイルを読み込みます。このファイルが無いときは、代わりに wp-content/themes/default/sidebar.php を読み込みます。

WordPressでは、『静的フロントページ』を指定していなければ、『home.php』がメインページとして表示されます。すなわち今日の設定では、WordPressのURLを指定すると、home.phpが表示され、『home.php』は、『header.php』と『footer.php』を読み込んで表示すると言うことです。

本日はここまでにします。

タグ

Tank Authの基本設定

今日は、前回導入した認証用ライブラリTank Authの基本設定を変更してみたいと思います。『application/config』フォルダの『tank_auth.php』を開きます。10行目と11行目を見てみます。

$config[‘website_name’] = ‘Your project’;
$config[‘webmaster_email’] = ‘webmaster@your-site.com’;

これは、認証ライブラリから送信されたEmail用の設定です。試しに『Your project』を『WinRoad徒然草』、『webmaster@your-site.com』を自分のメールアドレスに変更して、ユーザー登録をしてみます。

下記のようなアクティベート用メールが送信されてきました。

表題がちょっとおかしいですし、英語ですので、変更したいと思います。『application/language/japanese』フォルダの『tank_atuh_lang.php』ファイルを開き、33行目

$lang[‘auth_subject_activate’] = ‘ようこそ %s さん!’;

の『ようこそ%sさん』を『ようこそ%s へ』に変更します。

次に、『application/views/email』フォルダの『activate-html.php』ファイルを下記のように変更します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Welcome to <?php echo $site_name; ?>!</title></head>
<body>
<div style="max-width: 800px; margin: 0; padding: 30px 0;">
<table width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="5%"></td>
<td align="left" width="95%" style="font: 13px/18px Arial, Helvetica, sans-serif;">
<h2 style="font: normal 20px/23px Arial, Helvetica, sans-serif; margin: 0; padding: 0 0 18px; color: black;">ようこそ <?php echo $site_name; ?>へ</h2>
<?php echo $site_name; ?>への新規登録ありがとうございます。 登録が安全に行われるようにアクティベートをお願いします。<br />
アクティベートするには、下記のリンクをクリックして下さい。<br />
<br />
<big style="font: 16px/18px Arial, Helvetica, sans-serif;"><b><a href="<?php echo site_url('/auth/activate/'.$user_id.'/'.$new_email_key); ?>" style="color: #3366cc;">登録完了(アクティベート)</a></b></big><br />
<br />
リンクが動作しない場合は、下記のリンクをアドレスバーにコピーして下さい。<br />
<nobr><a href="<?php echo site_url('/auth/activate/'.$user_id.'/'.$new_email_key); ?>" style="color: #3366cc;"><?php echo site_url('/auth/activate/'.$user_id.'/'.$new_email_key); ?></a></nobr><br />
<br /><?php echo $activation_period; ?> 時間以内に、アクティベートを完了させて下さい。そうでなければ、登録は無効になり、再登録する必要があります。<br />
<br />
<br />
<?php if (strlen($username) > 0) { ?>あなたのお名前: <?php echo $username; ?><br />
<?php } ?>あなたのEメールアドレス: <?php echo $email; ?><br />
<?php if (isset($password)) { /* ?>Your password: <?php echo $password; ?><br /><?php */ } ?>
<br />
<br />
楽しい時を過ごして下さい!<br /><?php echo $site_name; ?> チーム</td>
</tr>
</table>
</div>
</body>
</html>

次に、スパム登録防止用のcapthca画像がデフォルトでは、ものすごく見づらい(大文字と小文字の判別がつきにくい、数字なのかアルファベットなのか判別しづらい)ですので、変更します。
『application/config』フォルダの『tank_auth.php』ファイルを開き、113行目

$config[‘captcha_fonts_path’] = ‘captcha/fonts/5.ttf’;

の最後を『4.ttf;』に変更します。これは各自の好みで変更して下さい。私はこれが一番読みやすかったです(読みやすい文字がスパム防止になるかどうかはわかりませんが、登録時のいらいらからは解消されました)。

それでは、ブラウザで確認してみます。アクティベート用のメールが下記のように変更になりました。

次に、『application/views/auth』フォルダの『login_form.php』ファイルを日本語にします。

<?php
$login = array(
	'name'	=> 'login',
	'id'	=> 'login',
	'value' => set_value('login'),
	'maxlength'	=> 80,
	'size'	=> 30,
);
if ($login_by_username AND $login_by_email) {
	$login_label = 'ログイン名又はEmail';
} else if ($login_by_username) {
	$login_label = 'ログイン名';
} else {
	$login_label = 'Email';
}
$password = array(
	'name'	=> 'password',
	'id'	=> 'password',
	'size'	=> 30,
);
$remember = array(
	'name'	=> 'remember',
	'id'	=> 'remember',
	'value'	=> 1,
	'checked'	=> set_value('remember'),
	'style' => 'margin:0;padding:0',
);
$captcha = array(
	'name'	=> 'captcha',
	'id'	=> 'captcha',
	'maxlength'	=> 8,
);
?>
<?php echo form_open($this->uri->uri_string()); ?>
<table>
	<tr>
		<td><?php echo form_label($login_label, $login['id']); ?></td>
		<td><?php echo form_input($login); ?></td>
		<td style="color: red;"><?php echo form_error($login['name']); ?><?php echo isset($errors[$login['name']])?$errors[$login['name']]:''; ?></td>
	</tr>
	<tr>
		<td><?php echo form_label('パスワード', $password['id']); ?></td>
		<td><?php echo form_password($password); ?></td>
		<td style="color: red;"><?php echo form_error($password['name']); ?><?php echo isset($errors[$password['name']])?$errors[$password['name']]:''; ?></td>
	</tr>

	<?php if ($show_captcha) {
		if ($use_recaptcha) { ?>
	<tr>
		<td colspan="2">
			<div id="recaptcha_image"></div>
		</td>
		<td>
			<a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a>
			<div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
			<div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>
		</td>
	</tr>
	<tr>
		<td>
			<div class="recaptcha_only_if_image">Enter the words above</div>
			<div class="recaptcha_only_if_audio">Enter the numbers you hear</div>
		</td>
		<td><input type="text" id="recaptcha_response_field" name="recaptcha_response_field" /></td>
		<td style="color: red;"><?php echo form_error('recaptcha_response_field'); ?></td>
		<?php echo $recaptcha_html; ?>
	</tr>
	<?php } else { ?>
	<tr>
		<td colspan="3">
			<p>Enter the code exactly as it appears:</p>
			<?php echo $captcha_html; ?>
		</td>
	</tr>
	<tr>
		<td><?php echo form_label('Confirmation Code', $captcha['id']); ?></td>
		<td><?php echo form_input($captcha); ?></td>
		<td style="color: red;"><?php echo form_error($captcha['name']); ?></td>
	</tr>
	<?php }
	} ?>

	<tr>
		<td colspan="3">
			<?php echo form_checkbox($remember); ?>
			<?php echo form_label('ログインの記憶', $remember['id']); ?>
			<?php echo anchor('/auth/forgot_password/', 'パスワードの紛失'); ?>
			<?php if ($this->config->item('allow_registration', 'tank_auth')) echo anchor('/auth/register/', '新規登録'); ?>
		</td>
	</tr>
</table>
<?php echo form_submit('submit', 'ログイン'); ?>
<?php echo form_close(); ?>

同じフォルダ内の『register_form.php』ファイルを下記のように変更します。

<?php
if ($use_username) {
	$username = array(
		'name'	=> 'username',
		'id'	=> 'username',
		'value' => set_value('username'),
		'maxlength'	=> $this->config->item('username_max_length', 'tank_auth'),
		'size'	=> 30,
	);
}
$email = array(
	'name'	=> 'email',
	'id'	=> 'email',
	'value'	=> set_value('email'),
	'maxlength'	=> 80,
	'size'	=> 30,
);
$password = array(
	'name'	=> 'password',
	'id'	=> 'password',
	'value' => set_value('password'),
	'maxlength'	=> $this->config->item('password_max_length', 'tank_auth'),
	'size'	=> 30,
);
$confirm_password = array(
	'name'	=> 'confirm_password',
	'id'	=> 'confirm_password',
	'value' => set_value('confirm_password'),
	'maxlength'	=> $this->config->item('password_max_length', 'tank_auth'),
	'size'	=> 30,
);
$captcha = array(
	'name'	=> 'captcha',
	'id'	=> 'captcha',
	'maxlength'	=> 8,
);
?>
<?php echo form_open($this->uri->uri_string()); ?>
<table>
	<?php if ($use_username) { ?>
	<tr>
		<td><?php echo form_label('ユーザー名', $username['id']); ?></td>
		<td><?php echo form_input($username); ?></td>
		<td style="color: red;"><?php echo form_error($username['name']); ?><?php echo isset($errors[$username['name']])?$errors[$username['name']]:''; ?></td>
	</tr>
	<?php } ?>
	<tr>
		<td><?php echo form_label('メールアドレス', $email['id']); ?></td>
		<td><?php echo form_input($email); ?></td>
		<td style="color: red;"><?php echo form_error($email['name']); ?><?php echo isset($errors[$email['name']])?$errors[$email['name']]:''; ?></td>
	</tr>
	<tr>
		<td><?php echo form_label('パスワード', $password['id']); ?></td>
		<td><?php echo form_password($password); ?></td>
		<td style="color: red;"><?php echo form_error($password['name']); ?></td>
	</tr>
	<tr>
		<td><?php echo form_label('パスワード再入力', $confirm_password['id']); ?></td>
		<td><?php echo form_password($confirm_password); ?></td>
		<td style="color: red;"><?php echo form_error($confirm_password['name']); ?></td>
	</tr>

	<?php if ($captcha_registration) {
		if ($use_recaptcha) { ?>
	<tr>
		<td colspan="2">
			<div id="recaptcha_image"></div>
		</td>
		<td>
			<a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a>
			<div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
			<div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>
		</td>
	</tr>
	<tr>
		<td>
			<div class="recaptcha_only_if_image">Enter the words above</div>
			<div class="recaptcha_only_if_audio">Enter the numbers you hear</div>
		</td>
		<td><input type="text" id="recaptcha_response_field" name="recaptcha_response_field" /></td>
		<td style="color: red;"><?php echo form_error('recaptcha_response_field'); ?></td>
		<?php echo $recaptcha_html; ?>
	</tr>
	<?php } else { ?>
	<tr>
		<td colspan="3">
			<p>下記に表示されるコードを入力して下さい</p>
			<?php echo $captcha_html; ?>
		</td>
	</tr>
	<tr>
		<td><?php echo form_label('確認コード', $captcha['id']); ?></td>
		<td><?php echo form_input($captcha); ?></td>
		<td style="color: red;"><?php echo form_error($captcha['name']); ?></td>
	</tr>
	<?php }
	} ?>
</table>
<?php echo form_submit('register', '登録'); ?>
<?php echo form_close(); ?>

パスワード再発行のためのフォーム『forgot_password_form.php』も下記のように変更します。

<?php
$login = array(
	'name'	=> 'login',
	'id'	=> 'login',
	'value' => set_value('login'),
	'maxlength'	=> 80,
	'size'	=> 30,
);
if ($this->config->item('use_username', 'tank_auth')) {
	$login_label = 'Email又はユーザ名';
} else {
	$login_label = 'Email';
}
?>
<?php echo form_open($this->uri->uri_string()); ?>
<table>
	<tr>
		<td><?php echo form_label($login_label, $login['id']); ?></td>
		<td><?php echo form_input($login); ?></td>
		<td style="color: red;"><?php echo form_error($login['name']); ?><?php echo isset($errors[$login['name']])?$errors[$login['name']]:''; ?></td>
	</tr>
</table>
<?php echo form_submit('reset', '新しいパスワードの発行'); ?>
<?php echo form_close(); ?>

それと、パスワード再発行用のメールも変更します。『application/views/email』フォルダの『fogot_password_html.php』ファイルを下記のように変更します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title><?php echo $site_name; ?>の新規パスワード作成</title></head>
<body>
<div style="max-width: 800px; margin: 0; padding: 30px 0;">
<table width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="5%"></td>
<td align="left" width="95%" style="font: 13px/18px Arial, Helvetica, sans-serif;">
<h2 style="font: normal 20px/23px Arial, Helvetica, sans-serif; margin: 0; padding: 0 0 18px; color: black;">新しいパスワードを作成します</h2>
パスワードをお忘れですか?大丈夫です。<br />
下記のリンクをクリックして新しいパスワードを作成して下さい。<br />
<br />
<big style="font: 16px/18px Arial, Helvetica, sans-serif;"><b><a href="<?php echo site_url('/auth/reset_password/'.$user_id.'/'.$new_pass_key); ?>" style="color: #3366cc;">新しいパスワードの作成</a></b></big><br />
<br />
リンクが動作しない場合は、下記のリンクをアドレスバーにコピーして下さい。<br />
<nobr><a href="<?php echo site_url('/auth/reset_password/'.$user_id.'/'.$new_pass_key); ?>" style="color: #3366cc;"><?php echo site_url('/auth/reset_password/'.$user_id.'/'.$new_pass_key); ?></a></nobr><br />
<br />
<br />
<a href="<?php echo site_url(''); ?>" style="color: #3366cc;"><?php echo $site_name; ?></a> ユーザーによりパスワード紛失の手続きが取られましたので、このメールを発行いたしました。 これは、新しいパスワードを作成する手続きの一部です。もし、あなたが新しいパスワードの発行を依頼していないのであれば、このメールを無視して下さい。以前のパスワードのままでご利用になれます。 <br />
<br />
<br />
ありがとうございました。<br />
<?php echo $site_name; ?> チーム</td>
</tr>
</table>
</div>
</body>
</html>

それでは、ブラウザで確認してみます。まずは、ログイン画面です。

次に、新規登録をクリックしてみます。

ログイン画面に戻って、今度は、パスワードの紛失をクリックしてみます。

新しいパスワードの発行をクリックしてみます。下記のようなメールが届きました。

修正自体も難しくありませんので、他にも『application/views』フォルダ内の『auth』フォルダと『mail』フォルダに色々ファイルがありますので、自分好みに修正して下さい。

尚、使い方は、『application/controllers』フォルダに上書き保存した『welcom.php』を見てみてば、わかると思いますが、一応説明しておきます。

$this->load->helper(‘url’);
$this->load->library(‘tank_auth’);

コンストラクタで、urlヘルパとtank_authライブラリを読み込んでいます。urlヘルパはredirectを利用するために読み込んでいます。

if (!$this->tank_auth->is_logged_in()) {
redirect(‘/auth/login/’);

これは、ログイン(認証)していなければ、『application/controllers』の『auth.php』の『login』メソッドへ移動します。

$data[‘user_id’] = $this->tank_auth->get_user_id();
$data[‘username’] = $this->tank_auth->get_username();
$this->load->view(‘welcome’, $data);

『user_id』と『username』のデータを配列$dataに代入して、ビューファイル『welcom』を開きます。

たったこれだけでユーザー認証ができるのはかなり便利です。

本日は、以上です。

タグ

2011年9月8日 | コメント/トラックバック(2) |

カテゴリー:CodedIgniter

CodeIgniterでTank Authの導入

認証用のライブラリ『Tank Auth』を導入して、使い心地を試してみようと思います。下記アドレスにアクセスして、『Download Tank Auth』をクリックします。

http://www.konyukhov.com/soft/tank_auth/

ダウンロードしたZipファイルには、『application』フォルダ、『captcha』フォルダ、『schema.sql』ファイルがあります。『captcha』フォルダはルートフォルダ(applicationフォルダと同じ階層)にコピーします。

次に、『application』フォルダをクリックしてみると、『config』『controllers』『helpers』『language』『libraries』『models』『views』フォルダがありますので、それぞれのフォルダの中身を同じ名前のフォルダにコピーして下さい。絶対にフォルダごとコピーしないで下さい。せっかく作った自分自身のファイルを上書きしないように、注意して下さい。

次に、サーバーのPHPMyAdminを開き、『インポート』タブをクリックし、ダウンロードした『schema.sql』ファイルを選択し、『実行する』ボタンをクリックします。

4つのテーブルが作成されました。

ブラウザで確認してみます。『http://ci.builwing.co.jp』と入力してみます。強制的に、認証ページ『auth/login』へリダイレクトしています。

それでは、『Register』をクリックして、ユーザーデータを登録してみましょう。

データが登録されたら、登録したEメールアドレスにアクティベート用のメールが届きます。

届いたメールの『Finish your registration』をクリックすると、再び『ログイン』画面になりますので、名前とパスワードを入力すれば、登録OKです。

ただ、結構あちこちで文字化けしますので、色々修正が必要な気がします。

時間があれば、細かい設定等もそのうちにしてみたいと思います。本日は以上です。

タグ

2011年9月7日 | コメント/トラックバック(0) |

カテゴリー:CodedIgniter

このページの先頭へ