カテゴリー別アーカイブ: WordPress

WordPressのテーマTwenty Twelveで、記事のタイトルの表示をはてなダイアリー風に、投稿日付+記事タイトルで表示する

管理している別のブログで、はてなダイアリー風に、各記事のタイトルの横に投稿日時を表示したかったので少しカスタマイズしてみた。

編集したのはContent.php。Twenty Twelveの投稿画面で、記事のフォーマットを選択できるようになっているのだが、フォーマットによってcontent-〇〇.phpが変わってくるらしい。基本的には標準フォーマットしか使わないので、とりあえずcontent.phpを編集する。

<?php the_title(); ?>の前に<?php the_date(‘Y-m-d’, ”, ”); ?>を挿入する。

<header class="entry-header">
			<?php the_post_thumbnail(); ?>
			<?php if ( is_single() ) : ?>
			<h1 class="entry-title"><?php the_date('Y-m-d', '', ''); ?>  <?php the_title(); ?></h1>
			<?php else : ?>
			<h1 class="entry-title">
				<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_date('Y-m-d', '', ''); ?>  <?php the_title(); ?></a>
			</h1>
			<?php endif; // is_single() ?>
			<?php if ( comments_open() ) : ?>
				<div class="comments-link">
					<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
				</div><!-- .comments-link -->
			<?php endif; // comments_open() ?>
		</header><!-- .entry-header -->

ちなみに、当ブログはTwenty Tenのテーマを利用しているが、Twenty Tenの場合はLoop.phpを同じように <?php the_title(); ?>の前に<?php the_date(‘Y-m-d’, ”, ”); ?>を挿入すれば、日付の表示を行える。

 

WordPressのテーマStingerを導入した際にajaxが動作しない

別で運営を始めたブログに、SEO対策テンプレートStingerってテーマを導入してみた。もともとAmazonJSっていうAmazonアフィリンク生成プラグインを導入してたんだけど、これが動作しなくなってしまった。

いろいろ調べた結果、どうもAjaxが正しく動作していないのが原因のようだったので、header.phpに以下のコードを挿入した結果動くようになった。

<?php
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1');
?>
<!-- wp_head()の上に挿入 -->
<?php wp_head(); ?>

WordPressの移行メモ

自宅サーバーにて運営していたブログですが、家庭の事情でネットが切断されることが多かったり、DDNSがうまく動作してくれないことがたまにあったりで、使いたいときに使えないことが多かったので、この度レンタルサーバーを借りて、そちらに移転することにしました。

1.レンタルサーバーの申し込み

レンタルサーバーはSaaSesという所のVPSサービス、Osukiniサーバーを選びました。
2012年4月30日までは初期費用0円キャンペーン中だったので一番安い月450円のLTプランを選びました。
OSはCentOS 64bitを選びました。

SaaSes

2.WordPressのコアファイルを抜き出す

旧サーバーのWordPressのコアファイルはApacheのドキュメントルート下のwordpressディレクトリに配置してました。
このディレクトリごと、新サーバーのApacheドキュメントルート下にごっそりと移植します。
僕はあまり小難しいことはできないのでSFTPを使って、いったん作業しているローカルにフォルダをコピーした後、またSFTPで新サーバーにコピーして、ドキュメントルート下に配置しました。

3.MySQLよりWordPressのデータベースを移植する

このデータベースの移植に昨夜インストールしたphpMyAdminを利用しました。
まず旧サーバーのデータベースをエクスポート。


これでデータベースがエクスポートされ、localhost.sqlというファイルがダウンロードできます。
この.sqlファイルは、テーブルのCreate文や、Insert文などのSQLが書かれています。
このダウンロードされたファイルを新サーバーのphpMyAdminでインポートします。

ここで問題が発生。php.iniがデフォルトなので、upload_max_filesizeが2M。
先ほどダウンロードしたlocalhost.sqlは2.9M。アップロードに失敗しました。
なので、php.iniを編集。

# vi /etc/php.ini

以下の部分を編集。

; Maximum allowed size for uploaded files.
; http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize
; upload_max_filesize = 2M デフォルト値
upload_max_filesize = 4M

Apache2のリスタート

# /etc/rc.d/init.d/httpd restart

これでアップロードでき、新サーバーのMySQLにデータベースを取り込むことができました。

4.PHPのアップデート

データの移行が完了したので、t-wata.com(新サーバー)/wordpress/にアクセスしてみました。
しかし、PHPのバージョンが古いため対応してないとのメッセージが表示されました。
移行するWordpressのバージョンは3.3。
デフォルトでインストールされているPHPのバージョンは5.1.6。

そのため、以下の方法でPHPのバージョンを5.3.3にアップデート。
PHPのアップデート

5.WordPressのデータベースの設定を変更

PHPのアップデートをしたので、再びt-wata.com(新サーバー)/wordpress/にアクセスしてみました。
するとデータベースエラーが発生して、見ることができない。
これはWordPressの設定ファイル無いの、データベースの設定項目の情報が古いままであったことが原因でした。

# vi /var/www/html/wordpress/wp-config.php

以下の部分を編集して、設定。

// ** MySQL 設定 - こちらの情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', '(データベース名)');

/** MySQL データベースのユーザー名 */
define('DB_USER', '(ユーザー名)');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', '(パスワード)');

/** MySQL のホスト名 */
define('DB_HOST', 'localhost');

/** データベースのテーブルを作成する際のデータベースのキャラクターセット */
define('DB_CHARSET', 'utf8');

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define('DB_COLLATE', '');

これで再び、t-wata.com(新サーバー)/wordpress/にアクセスしてみると、無事表示されました。

6.サブディレクトリをルートディレクトリとして表示

今の設定では、ルートディレクトリhttp://t-wata.comにアクセスすると、apacheのデフォルトのindexが表示されてしまうので、設定を変更。
WordPressの設定画面から、サイトアドレスをhttp://t-wata.comになっていることを確認。
そして、wordpressディレクトリ内にあるindex.phpをドキュメントルートにコピー。
コピーしたindex.phpの下記部分をWordPressの設定画面で設定したサイトアドレスに変更して保存。

/** Loads the WordPress Environment and Template */
require('./wordpress/wp-blog-header.php'); //ここを編集

これでhttp://t-wata.comにアクセスすると、トップページが表示されるようになりました。

7.ディレクトリ所有者の変更

wordpressディレクトリの所有者がrootになっていたため、記事を投稿する際に画像のアップロードができませんでした。
そこで以下のコマンドでwordpressディレクトリの所有者を変更。

# chown -R apache:apache wordpress

これで画像もアップロードできるようになりました。

とりあえず、現在の設定はここまで。
今のところ、以前と変わらず動いているようなので、大丈夫かな。

jQueryを使った角丸

WordPressのbodyの色を濃くしてみたら、何となくwrapper要素の角が目立つのでjQueryを利用して角を丸くしてみた。

header.phpの編集

<head>タグの最下部に以下の2行を追加。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>

footer.phpの編集

</body>の直前に以下を追加。

<script type="text/javascript">
    $('#wrapper').corner();
</script>

#wrapperというidを指定すれば簡単に角丸に。

WordPressのフォントと文字のサイズを変更する

デフォルトのフォントはなぜか明朝体になっているし少しサイズが大きいので変更してみた。
style.cssを編集する。

フォントの変更

フォントはstyle.cssのfont-familyを変更した。

/* =Fonts
————————————————————– */

body,
input,
textarea,
.page-title span,
.pingback a.url {
font-family: “メイリオ”, Meiryo, Verdana, Helvetica, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, sans-serif;
}

~中略~

input[type=submit] {
font-family: “メイリオ”, Meiryo, Verdana, Helvetica, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, sans-serif;
}

文字サイズの変更

文字のサイズは以下の部分を編集した。

/* Main global ‘theme’ and typographic styles */
body {
background: #f1f1f1;
}
body,
input,
textarea {
color: #666;
font-size: 12px;  /*18から変更*/
line-height: 18px;
}

現在の設定は以上。

LightBoxプラグインを入れてみた

LightBoxというプラグインを薦められたので入れてみた。
手順は以下の通り。

  1. 配布元より、Lightbox 2 WordPress Plugin 日本語版(Ver. 2.0.2)をダウンロードする。(lightbox-2-wordpress-plugin-202-j10n-ja100.zip)
  2. 解凍すると「lightbox-2-wordpress-plugin」というフォルダが展開されるので、フォルダごと wp-content/plugins にアップロードする。
  3. 「プラグイン」の画面で、「Lightbox 2」を有効化する。(※「使用する」をクリック)
  4. 「設定」→「Lightbox」で、各種の設定ができる。
  5. 投稿やページの編集画面の一番下にある「Lightboxを無効にする」にチェックを入れることで、そのページのみ「Lightbox 2」を解除することもできる。

おお、なかなかカッコいい!
でもサイズがでかすぎたら少しうっとうしいなw

参考:Lightbox 2 WordPress Plugin 日本語版 : Lightbox 2を簡単に使うプラグイン

Codecolorerを入れてみた。

WordPressのプラグイン、Codecolorerを入れてみたのでテスト。

<?php
print "Hello,World!\n";
?>

こんな感じでいいかな?

[cc] と [/cc]で囲めばいいみたい。

ここに詳しく書いてあった。
WordPressでソースコードを表示するプラグイン「CodeColorer」