カテゴリー : WordPress

[WordPress] モバイル端末向けの使いやすいテーマ Hew

WordPress の無料テーマ Hew がモバイルサイト向けに使いやすそうなのでご紹介します。

hew-screenshot-main

サイトへの訪問者のほとんどがモバイル端末のケースだと、PC・モバイルのそれぞれテーマを用意するのは面倒なのでモバイルに特化したいということが最近増えてきました。そんなとき Hew のようなレスポンシブデザインのテーマを使うことで、とかなり作業時間を短縮できてすごく助かってます。

レスポンシブデザインの WordPress テーマはたくさんありますが、Hew は PC とモバイルで大きくレイアウトに変更が変わらない軽めのレスポンシブデザインという点が個人的にポイント高いです。

[WordPress] カテゴリ名を被リンク(外部リンク)文言に使うサンプル

WordPress で、カテゴリ名を被リンク(外部リンク)文言に使うサンプルをご紹介します。

<?php
  $current_categories = get_the_category();
  $main_category = $current_categories[0];
?>
 
<a href="http://example.com" target="_blank" >
  <?php echo $main_category->name; ?>の◯◯なら✕✕におまかせ
</a>

カテゴリーを決めで1つ取得して、そのカテゴリ名を a タグのリンク部分の文言に使っています。


参考情報

WordPress 現在のカテゴリーIDやカテゴリー名、スラッグ、説明文、親カテゴリー等を取得表示する方法 | Stronghold

[WordPress]「WP-OGP」のサムネイル画像 og:image を変更する

WordPress で Facebook OGP を設定するプラグイン「WP-OGP」のサムネイル画像をデフォルトから変更しました。

まず、wp-content/plugins/wp-ogp/default.jpg を上書きするだけでサムネイル画像を変更できるとのことだったので、これを試してみました。

Facebook Debugger Tool でキャッシュをちゃんと消すところまではできたのですが、実際に Facebook 上でシェアするとデフォルトの画像のままでした。

結局、下記のようにファイル名を変更する方法で対応しました。


WP-OGP サムネイル画像の変更手順

  1. 新しくサムネイルに使う画像ファイル codenote-net-200×200.jpg を wp-content/plugins/wp-ogp/ 以下に設置する
  2. wp-content/plugins/wp-ogp/wp-ogp.php 内の wpogp_image_url_default メソッドで返す画像Pathを下記のように変更する
    function wpogp_image_url_default() {
            // default image associated is in the plugin directory named "default.png"
            //return wpogp_plugin_path() . '/default.jpg';
            return wpogp_plugin_path() . '/codenote-net-200x200.jpg';
    }
  3. Facebook Debugger Tool でキャッシュを削除する

以上です。


参考情報

Facebook「OGPの画像は1200px幅で」えぇ? 大きすぎない? しかも横長推奨? | Web担当者Forum

[WordPress] 良さそうなモバイル用テーマ(theme)

良さそうなWordPressのモバイル用テーマを自分用にまとめてみました。

いずれもレスポンシブデザインなので、プラグイン「WPtap Mobile Detector」でモバイルだけこれらのテーマを利用すればOKです。

Wallpress – Just another WordPress site

Gadgetry | Free WordPress Theme

DW Minion | FREE Responsive WordPress Theme For Personal Blog


参考情報

Themegraphy – WordPressテーマギャラリー

[WordPress] サーバの移行手順メモ

WordPress サイトを旧サーバから新サーバへ移行したので、手順をざっくりメモ。


移行元サーバでの作業

MySQLからダンプ

mysqldump --default-character-set=binary -h localhost -u dbuser -p dbname > backup.sql

WordPressのコンテンツ一式のバックアップ

次に、/var/www/vhosts/codenote.net に設置している wordpress コンテンツのディレクトリ以下を tar で圧縮します。

cd /var/www/vhosts/
tar zcvf codenote.net.tar.gz codenote.net/

ファイルを移行元サーバから移行先サーバへ転送

backup.sql と codenote.net.tar.gz を移行先サーバへ転送します。


移行先サーバでの作業

WordPressで使用するデータベースの作成

# mysql -u root
 
mysql> create database dbname;
mysql> grant all on dbuser.* to dbname@localhost identified by 'mypassword';

MySQLのリストア

mysql -u dbuser -p dbname < backup.sql

WordPressのコンテンツ一式の設置

/var/www/vhosts/ 以下にバックアップしたWordPressコンテンツの圧縮ファイルを展開します。

cd /var/www/vhosts/
tar zxvf codenote.net.tar.gz

念のため、所有者を全て Webサーバのユーザと一緒にしておきます。

chown -R nginx. /var/www/vhosts/codenote.net

以上です。


参考情報

CORESERVER から さくら VPS に WordPress を移行した | 暇人じゃない

さくらのVPS サーバ構築メモ 9 – データ移行 | コムギドットネット