Posts tagged WordPress

サーバ移転 XREA からさくらへ

0

昨日、このブログを設置しているサーバを XREA からさくらへ移転しました。移転ついでに WordPress のバージョンも 2.5 にアップ & テンプレート変更してみました。WordPress 2.5 や移転の話はまたそのうち書きます。

XREA は安くてよかったのですがサーバが重すぎです。毎日夕方になるとブログを開くのが重くなり、しまいには PHP ファイルがダウンロードされるというありえない状態に。また、先月2回ほどメール送受信が2日ほど不可能になり、移転を決めました。
(続きを読む…)

WordPress テーマを作成する(6) CSS でデザインを整える

1

前回まではまだ縦に長いだけのデザインされていない状態でした。今回は CSS を作成してデザインを整えてブログらしくして行こうと思います。 (続きを読む…)

WordPress テーマを作成する(5) サイドバーをウィジットに対応させる

10

前回作成したサイドバーをウィジットに対応させて、管理画面からサイドバーを変更できるようにしてみました。

sidebar.php の修正

sidebar.php の ulタグ の直後に以下の行を追加
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
また sidebar.php の最後の ul タグの前に以下の行を追加
<?php endif; ?>
つまり ul タグの中を上記の if 文ではさむ感じです。

<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
// ここにデフォルトのサイドバーの内容を書く
<?php endif; ?>
</ul>
</div>

functions.php の作成

作成しているテーマディレクトリに functions.php を作成して下記のコードを追加する。

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

これで管理画面で 表示 > ウィジット でアクセスすると下記のような画面になり動的にサイドバーを変更することができます。
dynamic1.png

少しの手間で使い勝手が便利になるので、テーマを作成するときにはウィジットに対応させておいた方がいいでしょう。

参考URL:Widgetizing Themes ? Automattic

WordPress テーマを作成する(4) サイドバーを作る

1

今回はサイドバーを作っていきます。sidebar.php にコードを書いていきます。

骨格

WordPress のサイドバーは下記のような構成の HTML になります。

WordPress テーマを作成する(3) トップページの投稿一覧を作る

1

index.php に投稿一覧を作成する

投稿内容の一覧を表示するには下記のコードのパターンを使用します。

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
/* ここに投稿内容を表示するコードを書く */
<?php endwhile; ?>
/* 1件も投稿がなかった場合 */
<?php endif; ?>

最初の if (have_posts()) で投稿があるかチェックしてあれば、次の while 文で投稿の数だけループして、投稿がなければ endwhile に分岐します。

WordPress のタグを使用して投稿内容を表示する

上記のループ内で使用する個別の投稿を表示するタグの一部を書いておきます。
投稿の個別URLを表示<?php the_permalink() ?>
タイトルを表示<?php the_title(); ?>
投稿日時を表示<?php the_time('Y/m/d') ?>
カテゴリを表示<?php the_category(', ') ?>
コメント・トラックバックを表示<?php comments_popup_link('0ä?¶', '1ä?¶', '%ä?¶'); ?>
投稿の編集リンクを表示(ログインしていないと非表示になる)<?php edit_post_link('ç?¨é??', '', ' | '); ?>

最終的なコード

<?php get_header(); ?>

<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('Y/m/d') ?></small>
<div class="entry">
<?php the_content('続きを読む ?'); ?>
</div>
<p class="postmetadata">カテゴリ:?<?php the_category(', ') ?> | <?php edit_post_link('編集', '', ' | '); ?> コメント・トラックバック:<?php comments_popup_link('0件', '1件', '%件'); ?></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('? 前のページへ') ?></div>
<div class="alignright"><?php previous_posts_link('次のページへ ?') ?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
</div>

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

最終的にこうなりました。(クリックで拡大表示されます)
wp3.png

まだ CSS をまったく書いていないので縦にのっぺりとしていますが、だいぶブログらしくなってきました。

WordPress テーマを作成する(2)

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>

ヘッダとフッタのみのブログができました

(クリックで拡大画像が見れます)
wp2.png

WordPress テーマを作成する(1)

4

WordPress用のテーマを作ってみようと思います。始めて作成するのですが、作成過程を投稿していきます。まずは第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(); ?>

テーマを見てみる

ここまで出来たら最低限のファイルはそろったので管理画面よりテーマを選択して実際にどういう風に見えるか確認してみます。
管理画面の「表示」を選択すると作成したテーマが一覧にあるので、選択します。
下が現在のサイトの様子です。(クリックで大きな画像が見れます。)
wp1.png

まだ、検索用のファイルなどを作成していないので Warning など出てますがシンプルな WordPress のページが表示されています。

WordPress の サイドバーの最近の投稿(Recent Entry)にはてブ数を表示する

0

このブログでいうと右カラムにある「Recent Entry」の各エントリの横にはてブ数を表示してみました。
これは WordPress のソースを少しいじる必要があります。

wp-includes/widgets.php
698行目あたりにある
<li><a href="<?php the_permalink() ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?> </a></li>

という行を
<li><a href="<?php the_permalink() ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?> </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></li>

に変更します。
変更したファイルをアップロードするのをお忘れなく!

試した WordPress のバージョンは ME2.2.1 にです。

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>

参考:はてなブックマーク – ヘルプ – 自分のブログに「○○users」を表示

Go to Top