I love iPhone, Android, Cocos2d-x
WordPress
WordPress テーマを作成する（２）
1前回は style.css と index.php だけを作成して最低限のブログを表示させました。なぜこれだけのファイルで表示ができるかというと選択しているテーマに必要なファイルがない場合は wp-content/thmems/default 内のファイルを使用するためです。
今回はヘッダファイルとフッタファイルを作成します。
ヘッダファイル
テーマディレクトリに header.php を作成し下記のような内容にしました。
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
ゼロから書くのは大変なので default/header.php をコピーして必要最低限のみ残してみました。
フッタファイルの作成
ヘッダ同様に footer.php ファイルを作成し、下記のようにしました。
<div id="footer">
<?php bloginfo('name'); ?> Powered by <a href="http://wordpress.org/">WordPress</a><br />
<a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
ヘッダとフッタのみのブログができました
（クリックで拡大画像が見れます）
WordPress テーマを作成する（１）
4WordPress用のテーマを作ってみようと思います。始めて作成するのですが、作成過程を投稿していきます。まずは第1回目です。
テーマフォルダを作成する
wp-content/themes/ 以下にテーマ用のディレクトリを作成します。
今回は test というディレクトリを作成しました。
CSS ファイルを作成する
作成したテーマディレクトリに style.css を作成します。
style.css には必要最低限の項目を書いておきます。
/* Theme Name: Test Template Theme URI: http://www.syuhari.jp/ Description: テーマ作成テスト用です。<a href='http://www.syuhari.jp/'>リンクも出来ます</a> Author: Boze Author URI: http://www.syuhari.jp/blog/ Version: 1.0 */
- Theme Name
- テーマの名称。全角可。ここに書いた名称が管理画面のテーマ選択画面に表示される。
- Theme URI
- テーマのサイトURL。半角のみ
- Description
- テーマの説明。全角可。a タグでリンクも作成できる。ちなみに script タグなども書けました。タグはノーチェックかも。いいのかな？
- Author
- 作成者名。全角可
- Author URI
- 作成者のURI。半角のみ
- Version
- バージョン。半角のみ。ここに書いたバージョン番号が管理画面のテーマ選択画面のテーマ名の後に表示される。
全角を入れたときには文字コードを UTF-8 にする必要があります。
index.php を作成する
作成したテーマディレクトリに index.php を作成して、最低限のコードを書く。
< ?php get_header(); ?> < ?php get_sidebar(); ?> < ?php get_footer(); ?>
テーマを見てみる
ここまで出来たら最低限のファイルはそろったので管理画面よりテーマを選択して実際にどういう風に見えるか確認してみます。
管理画面の「表示」を選択すると作成したテーマが一覧にあるので、選択します。
下が現在のサイトの様子です。（クリックで大きな画像が見れます。）
まだ、検索用のファイルなどを作成していないので Warning など出てますがシンプルな WordPress のページが表示されています。
WordPress の Simple Tagging プラグインで表示する関連エントリのはてブ数を表示する方法
1このブログは Simple Tagging というプラグインを使用して各エントリにタグをつけています。このプラグインを使用するとタグから各エントリの関連エントリを自動的に表示することができます。詳しくは下記エントリをご覧ください。
WordPress でタグを使えるようにしてみた
今回はこの関連エントリのはてなブックマーク数を表示するようにする方法です。
こんなイメージです。
関連エントリを表示するタグ
<?php STP_RelatedPosts(); ?>
この STP_RelatedPosts 関数の第1引数は表示フォーマットを指定するので、そこにはてブ数を表示するようなフォーマットを指定します。
<?php STP_RelatedPosts('<li><a href="%permalink%" title="%title% (%date%)">%title%</a> <a href="http://b.hatena.ne.jp/entry/%permalink%"><img src="http://b.hatena.ne.jp/entry/image/%permalink%" alt="" /></a>'); ?>
これで関連エントリにはてブ数が表示されるようになりました。
WordPress ではてなブックマーク数を表示
2少しづつはてブされるようになってきたので、各エントリーのタイトルの横にはてなブックマーク数と
を表示するようにしてみました。
はてブボタンを表示
http://d.hatena.ne.jp/images/b_entry.gif からアイコンをダウンロードして自分のサーバにアップロードします。
表示したい場所に下記タグを追加します。
<a href='http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>'><img src='/images/b_entry.gif' width='16' height='12' style='border: none;' alt='このエントリーを含むはてなブックマーク' title='このエントリーを含むはてなブックマーク' /></a>
参考：はてなブックマーク – ヘルプ – 自分のブログに「このエントリーを含むはてなブックマーク」ボタン
はてなブックマーク数を表示
表示したい場所に下記タグを追加します。
<a href='http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>'><img src='http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>' alt='' /></a>
WordPress 携帯閲覧用プラグイン
0本ブログに携帯閲覧用プラグインをインストールしてみました。
下記のサイトに詳しくインストール方法は書かれています。
非常に簡単でした。
ファイルを2つアップロードして管理画面からプラグインをアクティブ化するだけで携帯から閲覧するのに適したページにしてくれます。
XREA に設置した WordPress で画像のアップロードができない
18前の投稿で初めて画像をアップロードしました。
そのときに、なかなか画像のアップロードができなかったので対策メモ。
最初はパーミッションでエラーになった
-> FTP から wp-content ディレクリにパーミッションの設定をした。
再度アップロードすると今度は wp-content 内に uploads ディレクトリがないとエラー。
-> FTP からディレクトリの作成をおこない、パーミッションの設定をして再度アップロードしてみた。
今度はファイルを移動できないとのこと。
ググってみると、XREA の PHP はセーフモードでした。
そのためFTP でディレクトリを作成するとユーザが apache になるために保存できなかったのですね。
そこで下記のようにしました。
- ローカル側で wp-content 内に uploads ディレクトリを作成
- そのディレクトリをアップロード
- FTP で wp-content/uploads ディレクトリに書き込みパーミッションを設定
再度アップロードすると今度はうまく行きました。
他には CGI として PHP を動かす方法もあるようです。
参考サイト
WordPress Japan :: トピックを表示 – XREAでファイルアップロードが出来ない
XREA で WordPress ファイルアップロード機能を利用する – Numb.
PHPをCGIとして動かす方法について – XREA&CORE SUPPORT BOARD
WordPress でタグを使えるようにしてみた
2使用したプラグインは Simple Tagging です。
WordPress用、タグ付けプラグイン：Simple Tagging | 創造マラソン
こちらのサイトでかなり詳しく解説されています。
Single.php のエントリー本文の後に
<?php STP_PostTags(); ?>
を入れて、タグを表示させ、さらに
< ?php STP_RelatedPosts(); ?>
でタグにより、関連するエントリーを表示させるようにしました。
また、サイドバーに
< ?php STP_Tagcloud(); ?>
を入れてタグクラウドを表示させました。
ただ、このままではリスト構造で縦に並んでしまうので、
Tag Cloud – Simple Tagging for WordPress – Trac
こちらを参考に下記を追加しました。
style.css
ul#tagcloud { padding:0; margin:0; text-align:center; list-style:none; }
ul#tagcloud li { display:inline; font-size:70%; color:#ccc; background: none; padding: 0;}
ul#tagcloud li a, ul#tagcloud li a:link { text-decoration:none; }
ul#tagcloud li a:hover { text-decoration:underline; }
ul#tagcloud li.t1 a { color:#797979; font-size: 120%; }
ul#tagcloud li.t2 a { color:#6d6d6d; font-size: 160%; }
ul#tagcloud li.t3 a { color:#616161; font-size: 190%; }
ul#tagcloud li.t4 a { color:#555555; font-size: 210%; }
ul#tagcloud li.t5 a { color:#484848; font-size: 230%; }
ul#tagcloud li.t6 a { color:#3c3c3c; font-size: 250%; }
ul#tagcloud li.t7 a { color:#303030; font-size: 270%; }
ul#tagcloud li.t8 a { color:#242424; font-size: 290%; }
ul#tagcloud li.t9 a { color:#181818; font-size: 310%; }
ul#tagcloud li.t10 a { color:#0c0c0c; font-size: 330%; }
WordPress に「はてなスター」を導入してみました
0はてなスターを導入してみました。
このブログは WordPress でやっています。
はてなスターはじめてガイド – Hatena Starに対応ブログサービスに入っていたので早速 JavaScritp コードを header.php の の前に入れてみました。
ところが、サイドメニューの「Category」などの横に表示されてしまいました。
どうも h3タグの中のaタグに☆ボタンを入れているようです。
再度、はてなスターはじめてガイド を見ると
技術的な詳細については、HatenaStar.js下部のドキュメント（英語）をご覧ください。
とあります。早速ソースを見てみると最後の方に色々とドキュメントが書かれています。
// This is the optional script for WordPress blogs
<script src=”http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js” type=”text/javascript”></script>
とありました。
で、
<script src="http://s.hatena.ne.jp/js/HatenaStar.js" type="text/javascript"></script> <script src="http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js" type="text/javascript"></script>
と書くことにより、うまく行きました^^
さらにコメントをつけられるように、自分のブログを登録します。登録すると新たにコメントを付けられる JavaScript が発行されるので、それを追加すると。。。また、h3タグの後ろに☆ボタンが。。。
よくみるとブログ登録後に発行された JavaScritp の1行目は HatenaStar.js を読み込むもので、一番最初に貼り付けたコードと同じでした orz
で、結局ブログ登録後に発行された JavaScript と WordPress.js を読み込む JavaScript を貼り付けることにより、うまく行きました。
ブログ登録後に表示されるコードはトークンが追加されたということですね。