Hatena::ブログ(Diary)

webのきろく|web フルハウス

2013-04-11

ブログの基本情報を記述

作成したテンプレートを編集してブログをレイアウトしていきます。

f:id:michelle-tanner:20130416191501j:image

[外観 > テーマ編集]で編集したいファイルをテンプレート一覧から選んで編集できます。個人的には普段通り、ファイルをエディーターで編集する方が好きです。ファイルを編集したらきちんとこの画面に編集後のソースが表示されます。

ページの基本となるソースを記述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>
<?php bloginfo('name'); ?>
<?php wp_title(); ?>
</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
</head>
<body>
</body>
</html>

▲DOCTYPE宣言をし、タイトルやエンコード種類、スタイルシートのリンクなどはWordPressのテンプレートタグを使用して記述します。

f:id:michelle-tanner:20130416185006j:image

▼コンテンツタイプを出力
<?php bloginfo('html_type'); ?>

▼エンコードの種類を出力
<?php bloginfo('charset'); ?>

▼スタイルシートのURLを出力
<?php bloginfo('stylesheet_url'); ?>

ブログの基本情報を出力するパラメータは色々な種類があります。

パラメータの値 出力する内容
nameブログ名
descriptionブログの説明
urlブログのURL
rdf_urlRDF/RSS1.0フィードのURL
rss_urlRSS0.92フィードのURL
rss2_urlRSS2.0フィードのURL
atom_urlAtomフィードのURL
comments_rss2_urlコメントフィードのURL
pingback_urlピングバック用のURL
admin_email管理者のメールアドレス
charsetエンコードの種類
versionWordPressのバージョン
text_directionテキストの書字方向
html_typeコンテンツタイプ
wpurlWordPressのインストール場所
template_urlテーマフォルダーのURL
template_deirectoryテーマフォルダーのURL
stylesheet_urlスタイルシートファイルのURL

こんなに覚えられないのですが、まとめサイトなどあるのでしょうか??

わたし、気になります。

2013-04-10

スパム対策を行う

WordPressには標準で「Akismet」という協力なスパム対策プラグインが用意されています。このAkismetを使用するには「APIキー」なるものが必要です。

akismet.comで会員登録

akismet.comに行って会員登録をします。

f:id:michelle-tanner:20130415184023j:image

▲「Get a WordPress kye 」をクリックします。

f:id:michelle-tanner:20130415184024j:image

▲ピンクで囲ってある方をクリックします。

f:id:michelle-tanner:20130415184745j:image

▲必要事項を記入してsign up→します。

f:id:michelle-tanner:20130415185129j:image

▲ピンクで囲ってある部分のレバーを$0になるよう左にずらします。悲しい顔しても気にせず0円にします。CONTACT INFOの記入も忘れずに。

f:id:michelle-tanner:20130415185130j:image

▲登録時に記入したメールアドレスにAkismeからメールが届きます。黄色いところがAPIキーです。

WordPressで設定

f:id:michelle-tanner:20130415190247j:image

▲WordPress管理画面で[プラグンイン > インストール済み]を開き、Akismetの「有効化」をクリックします。

f:id:michelle-tanner:20130415190809j:image

[プラグンイン > Akismet設定]を開き、メールで届いた鍵を入力して「設定を更新」すればOKです。

2013-04-09

オリジナルテーマを作成

WordPressが生成するブログのデザインは「テーマ」として管理されています。オリジナルのテーマを作れば、好きなデザインのブログが作成できます。

テーマフォルダを用意する

f:id:michelle-tanner:20130411184651j:image

[外観 > テーマ]を見ると今使用しているブログのテーマが確認で来ます。「利用可能なテーマ」にオリジナルテーマが表示されるよう、テーマフォルダを用意します。

f:id:michelle-tanner:20130408182051g:image

f:id:michelle-tanner:20130411214914j:image

▲新しいテーマのフォルダ(例は「sample」)を用意し「themes」の中に入れます。

「index.php」というテンプレートを作成します。このファイルにページに関する記述をします。今は何も記入していません。

「style.css」を外部スタイルシートとして、生成したページから読み込み利用します。そして、テーマに関する情報をコメントとして記述します。

/*
Theme Name: サンプルテーマ
Theme URI: http://www.www.www/
Description: 授業内で作ったテーマ
Version: 1.0
Author: BOSS
Author URI: http://www.www.www/
*/
  • Theme Name:テーマ名
  • Theme URI:テーマのURL
  • Description:テーマの説明
  • Version:テーマのバージョン
  • Author:テーマの著者
  • Author URI:テーマ著者のURL

「screenshot.jpg」を用意すると、テーマを選択するときに表示されてわかりやすいので用意します。

f:id:michelle-tanner:20130411190146j:image

▲更新すると作ったテーマが表示されました。「有効化」を押すと、このオリジナルテーマでページが生成されます。

f:id:michelle-tanner:20130411191035j:image

▲「index.php」になにも記入していないので白紙状態で表示されます。

「functions.php」はメニューを表示するために必要な「ウィジェット」機能を有効化にするためのファイルです。以下の記述をしておきます。

<?php
// ウィジェット
register_sidebar();
?>

f:id:michelle-tanner:20130411191256j:image

[外観 > ウィジェット]でカスタマイズできます。

「functions.php」ファイルがないとこの画面が選択できません。