K4750.NET

WordPressにて関連記事をプラグインを使わずに表示させる

個別記事のページにて、その記事の関連記事(ここでは、同一のタグを持つ記事とする)をプラグインを使わずに表示させた際のメモ。


1.ソースコード

タグ構成やクラス指定は本サイト独自のやり方に従う(panel、list-group等はBootstrap用のもの)。

<?php
$related_posts = get_posts(array(
  'numberposts' => 10, 'tag__in' => wp_get_post_tags(get_the_ID(), 'fields=ids'),
  'post__not_in' => array(get_the_ID()), 'orderby' => 'date', 'order' => 'DESC'));
if ($related_posts) {
?>

<aside>
 <section class="related-posts">
  <div class="panel panel-default">
   <div class="panel-heading">関連記事</div>
   <div class="list-group">
    <?php foreach($related_posts as $p) {?>
     <a class="list-group-item" href="<?php echo get_permalink($p->ID);?>">
      <small><?php echo $p->post_title;?></small>
      <div class="pull-right"><small class="text-muted"><?php echo mysql2date('Y-m-d', $p->post_date);?></small></div>
     </a>
    <?php } ?>
   </div>
  </div>
 </section>
</aside>

<?php }?>

2.解説

<?php
$related_posts = get_posts(array(
  'numberposts' => 10, 'tag__in' => wp_get_post_tags(get_the_ID(), 'fields=ids'),
  'post__not_in' => array(get_the_ID()), 'orderby' => 'date', 'order' => 'DESC'));
if ($related_posts) {
?>

関連記事のリストを取得(get_posts)している。取得する記事は、最大10件(numberposts)、記事(get_the_ID())のタグ(wp_get_post_tags)と同一のタグを持つ(tag__in)。ただし、記事自身を含まず(post__not_in)。表示順(orderby、order)は、記事の投稿日の降順(新しい記事から古い記事の順)とする。

    <?php foreach($related_posts as $p) {?>
     <a class="list-group-item" href="<?php echo get_permalink($p->ID);?>">
      <small><?php echo $p->post_title;?></small>
      <div class="pull-right"><small class="text-muted"><?php echo mysql2date('Y-m-d', $p->post_date);?></small></div>
     </a>
    <?php } ?>

関連記事の数分繰り返して(foreach)表示する。表示/出力する内容は、記事のリンク先(get_permalink)、記事のタイトル($p->post_title)、記事の投稿日($p->post_date)。記事の投稿日はmysql書式と呼ばれる書式で格納されているので、関数(mysql2date)を使用して見やすい書式('Y-m-d')へ変換する。


3.今後

関連記事として、「同一のタグを持つ記事」を表示できているのは良いのだが、表示順は「投稿日の降順」ではなく「人気の記事順」としたいところ。

Ubuntuバージョンアップに伴うWordPressの移行

さくらのVPSのUbuntu 12.04を14.04へバージョンアップ(OS再インストール)した際のメモ。データ移行については、主にWordPressについて記述した。なお、データ移行を行ったWordPressサイトは、投稿数が50にも満たない、プラグインはほとんど使用していないといった極小規模なサイトであるため、もっと規模が大きかったり、複雑なことをしているサイトではこんな単純な作業では済まないだろう。


1.WordPressのバックアップ

WordPressの管理画面(/wp-admin)にて、「ツール」→「エクスポート」を選択。エクスポートサブパネルにて「すべてのコンテンツ」を選択し「エクスポートファイルをダウンロード」をクリックし、XMLファイルを保存しておく。このXMLファイルには「投稿、ページ、コメント、カスタムフィールド、カテゴリー、タグ」が含まれているらしいが、テーマ(独自に作成したもの)、アップロードしたメディアファイル、WordPressの設定情報といったものは含まれないようだ。

テーマやメディアファイルについては、サーバ上のファイル(/var/www配下のすべてのファイル)をローカルに保存しておくこととした。WordPressの設定情報については、データベース(MySQL)内に保存されていると思われるが、大した変更を行っていないので、手順で復旧することとして、MySQLの残りのデータはすべて捨てることとした。


2.ファイルのバックアップ

サーバ上のファイルのうち、/etc/home配下のファイルについては、ローカルに保存しておくこととした。


3.さくらVPS再インストール

SAKURA InternetのカスタムOSインストールガイド内にある「Ubuntu 12.04/14.04」を参考に、OS起動までの作業を行う。インストールするOSはもちろん「Ubuntu 14.04 amd64」だ。OS起動後は、TeraTerm SSHにて接続確認および作業を行う。


4.Webサーバ構築

Ubuntu 14.04のOfficial Documentation「Ubuntuサーバーガイド」を参考に、apache2、php5、MySQLのインストールを行う。

apache2のインストールおよび設定は以下のとおり。忘れずにrewriteモジュールを有効にしておく。

$ sudo apt-get install apache2
$ sudo a2enmod ssl
$ sudo a2enmod rewrite
$ sudo a2ensite default-ssl
$ vi /etc/apache2/apache2.conf → /var/wwwについてAllowOverride Allとしておく。
$ sudo service apache2 restart

php5のインストールは以下のとおり。特段設定は不要で、apache2の再起動のみ行う。

$ sudo apt-get install php5 libapache2-mod-php5 php5-mysql
$ sudo service apache2 restart

MySQLのインストールは以下のとおり。インストール後のデータベースとデータベース用のユーザの作成については、WordPress Codex「WordPress のインストール」を参考に作業を行う。下記passwd部分は適当に決める。

$ sudo apt-get install mysql-server
$ mysql -u root -p
mysql> CREATE DATABASE wp;
mysql> GRANT ALL PRIVILEGES ON wp.* TO "wp"@"localhost" IDENTIFIED BY "passwd";
mysql> FLUSH PRIVILEGES;
mysql> EXIT

WinSCPにてローカルPCからサーバへファイルをアップロード等行うために、www-dataユーザをログイン可能にしておく。

$ sudo passwd www-data
$ sudo usermod -s /bin/bash www-data

6.WordPressインストール

ubuntuのパッケージは使用せず、tar.gzファイルをWordPressの日本語サイトからダウンロードして/var/www/htmlへインストールする。

$ su -
# cd /var/www
# mv html html.old → デフォルトのファイルを保存しておく。
# wget http://ja.wordpress.org/wordpress-3.9-ja.tar.gz
# tar xvfz wordpress-3.9-ja.tar.gz
# mv wordpress html
# chown -R www-data.www-data html
# cd html
# mv wp-config-sample.php wp-config.php

wp-config.phpの内容を以下に書き換える。データベース作成時に設定した値を使用する。

define('DB_NAME', 'wp');
define('DB_USER', 'wp');
define('DB_PASSWORD', 'passwd');
define('DB_HOST', 'localhost');

7.WordPressのテーマ、メディアファイル等のアップロード

保存しておいた以下のフォルダ、ファイルをサーバ上の同フォルダへアップロードする。

.htaccess
favicon.ico
wp-content/uploads
wp-content/themes/k4750v1 → 本サイト独自のテーマ。

8.WordPressの初期設定

ブラウザにて「/wp-admin/install.php」へアクセスし、サイト名等を入力し、初期設定を完了させる。また、管理画面へログイン後、テーマの設定、パーマリンクの設定(本サイトでは「日付と投稿名」を使用している)を元の設定に手動で戻す。

最後に、管理画面から「ツール」→「インポート」→「WordPress」を選択し、WordPress Importerのインストール後に「1.WordPressのバックアップ」にてバックアップしておいたXMLファイルをインポートする。なお、インポート時の「Download and import file attachments」は、チェックを入れるとメディアファイルのリンクがおかしくなってしまったので、チェックを入れずにインポートを実施した。

以上で、一通りの作業は完了。ブラウザにて問題なくWordPressサイトが表示されることを確認する。

WordPressにいいね!ボタンを設置した(その2)

WordPressにいいね!ボタンを設置した(その1)の続き。その1で課題となっていた、トップページの表示速度の低下を改善する。


1.遅延ロード

今までは、ブックマークボタン等を処理する各種JavaScriptをbodyタグが閉じる直前にずらずらと並べていた(以下、Google +1ボタンを例にする)。

<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</body>

これを、今回設置したbookmarkボタンが押下されたタイミングで実行するように変更する。

<!-- bootstrapのDropdownを使った、bookmarkボタン。sb-buttonsクラスを付与しておく。 -->
<div class="btn-group dropup sb-buttons">...</div>
...
<script type="text/javascript">
$(".sb-buttons").on('show.bs.dropdown', function() {
  (function() {
    var po = document.createElement('script');
    po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  })();
});
</script>
</body>

このままだと、bookmarkボタンを押下する度にdocument.createElement('script')が実行されるので、scriptタグが生成済みの場合は何もしないようにしておく(この辺りは、他のブックマークボタンの実装を参考にしている)。

(function(d, e, id) {
  if (d.getElementById(id)) return;
  var po = d.createElement(e);
  po.type = 'text/javascript'; po.async = true; po.id = id;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = d.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(po, s);
})(document, 'script', 'gpo-jssdk');

同様に、はてなブックマーク用のスクリプト等、他のスクリプトについてもbookmarkボタン押下時に一度だけ実行されるように修正する。


2.結果と次の課題

トップページの表示速度は、bookmarkボタンを設置する前の状態に戻り、快適になった。ただし、ボタンを押下してから各種ブックマークボタンが表示されるまでが長い。また、各種ブックマークボタンが表示されるまでの間は「真っ白」なので、ユーザーには「バグか?」と思われそう。

WordPressにいいね!ボタンを設置した(その1)

WordPressの各投稿のフッターに(こっそり)ブックマークボタンを設置してみた。


1.見た目

BootstrapのButton dropdownsを使って実装した。各ボタンの表示にはWordPressのプラグインを使用せず、それぞれの本家のドキュメント等を参考にして作った。

bookmark


2.思ったこと

ボタンを設置するにあたり、思ったこと。

  • プラグインが自動生成するボタンは、美しく配列するには微調整が必要である。
  • ブックマークボタンの見た目には統一性がないので、常に表示しておくと周りのデザインになじまない。
  • ブックマーク数等の表示は面白いと思うが、本質ではないので常に表示しておくのは煩わしい。
  • 独自のデザインを採用するやり方もあるが、常に表示するのでなければ、こだわる必要はない。
  • そもそも設置しないという選択肢もあるが、面白そうなので設置してみたい。ヽ(´ー`)ノ

3.課題

  • ボタン設置に伴うトップページの表示速度の低下。トップページの表示投稿数を3に下げて暫定対処。。
  • FirefoxとIEで、はてなブックマークとfacebookのボタンが表示されない場合あり。

GitによるWordPressサイト管理

本サイトのWordPress関連のリソース(MySQL上のデータは除く)をGitの管理下に置いた際の個人的メモ。このWordPress関連のリソース管理方法はお手軽ではあるが、かなり乱暴なことをやっている(気がする)ので、他の人の参考にはならないと思う。


1.前提と目標

使用環境はUbuntu 12.04.3 LTS。Apache2のDocumentRootは/var/wwwで、ここにWordPress関連のリソース置いている。本サイトのテーマファイル等を修正する際は、WinSCPを使ってssh経由で/var/www配下のファイルをテキストエディタで直接編集しているが、この編集の履歴を残すためにGitを導入する。

今回の目標は(いろいろ思うところもあるが)/var/wwwディレクトリ配下にリポジトリ(.git)を作成し、全てのリソースをこのリポジトリにコミットすることとする。


2.Gitインストール

本家の手順に(概ね)従う。まずは、依存ライブラリのインストールから。

sudo apt-get install libcurl4-gnutls-dev libexpat1-dev gettext 
  libz-dev libssl-dev

そして、Gitをインストール。

$ wget https://git-core.googlecode.com/files/git-1.8.4.1.tar.gz; cd git-1.8.4.1/
$ make configure
$ ./configure --prefix=/usr/local
$ make all
$ sudo make install
$ git --version
git version 1.8.4.1

さらに、Git最新版を上書きインストール。

$ git clone git://git.kernel.org/pub/scm/git/git.git; cd git
$ make configure
$ ./configure --prefix=/usr/local
$ make all
$ sudo make install
$ git --version
git version 1.8.4.1.559.gdb9bdfb

3.リポジトリ生成とコミット

目標にあるとおり、今回は必要最低限のことだけをやる。と、その前にGitの設定(.gitconfigファイルの作成)をしておく。

$ git config --global user.name www-data
$ git config --global user.email www-data@k4750.net

リポジトリの生成とコミットは以下のとおり。

$ cd /var/www
$ git init
$ git add .
$ git commit -m 'first commit'

このままだと、http://www.k4750.net/.git/でリポジトリの内容が外部から見えてしまうので、乱暴ではあるが以下の.git/.htaccessファイルを作成する。

order allow,deny
deny from all