カテゴリー : WordPress

[WordPress] All in One SEO Pack で Facebook og:image をいい感じに表示する設定方法

WordPress プラグイン All in One SEO Pack の「ソーシャルメディア」機能を利用して、Facebook og:image をいい感じに表示する設定をしました。

まず、All in One SEO の [機能管理] メニューをクリックして、[ソーシャルメディア] の項目の [Activate] ボタンをクリックします。

All in One SEO Pack - Social media - before activate

[ソーシャルメディア] を [Activate] すると [ソーシャルメディア] メニューが追加されます。

All in One SEO Pack - Social media - side menu

[Select OG:Image Source] から [First Attached Image] を選択して、ページ下の [設定を更新 »] ボタンをクリックします。

All in One SEO Pack - Select OG-Image Source

この状態で「Sharing Debugger – Facebook for Developers」の機能を使って確認すると、Select OG:Image Source の設定を変更する前が下記で、

Facebook Sharing Debugger - before

Select OG:Image Source 設定変更後は、下記のように記事中の1枚目の画像が og:image に利用されるようになりました。

Facebook Sharing Debugger - after

All in One SEO Pack のソーシャルメディア機能には、他にもたくさん機能があるみたいなので積極的に活用していきたいです。

WordPress の投稿者名を非表示に設定しました

WordPress の投稿者が1人だけなのとセキュリティ的によくないとのことだったので、投稿者を非表示にしました。

設定は WordPress 管理画面の「テーマオプション」からできます。

テーマオプションからWordPressの投稿者名を非表示にする。

テーマオプションからWordPressの投稿者名を非表示にする。

テーマオプション のURL は http://example.com/wp-admin/themes.php?page=theme_options です。

「投稿者名を表示にする」という項目があるので、ここのチェックボックスを外すと投稿者名を非表示にすることができます。

[WordPress] XML-RPC を無効にする

WordPress の XML-RPC を DoS 攻撃に悪用されることを知ったので、Nginx の設定を変更して XML-RPC を無効にしました。

/etc/nginx/conf.d/codenote.com.conf

server {
    # deny xmlrpc
    location = /xmlrpc.php {
        deny all;
    }

XML-RPC を無効にすると Nginx の error.log には下記のようなログが出力されます。

2015/07/12 21:49:31 [error] 11605#0: *815037 access forbidden by rule, client: 123.123.123.123, 
server: codenote.net, request: "POST /xmlrpc.php HTTP/1.1", host: "codenote.net"

以上です。


参考情報

[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 サイトを旧サーバから新サーバへ移行したので、手順をざっくりご紹介します。

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

以上です。

参考情報

[WordPress]「古いプラグインを削除できませんでした。」の解決方法

WordPressで、プラグインを削除しようとしたら「古いプラグインを削除できませんでした。」エラーが発生しました。

ディレクトリの所有者が apache や nginx になっていないのが原因だと思うので、chown で所有者を変更します。

WordPressサイトのインストールPathが /var/www/vhosts/codenote.net の場合、下記のような感じです。

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

以上です。


参考情報

wordpressでプラグインを自動アップグレードできないときの対処(応急処置) – sugarballの日記

[WordPress] WP Super Cache の WPTouch エラーの解決方法

WordPress のキャッシュプラグイン「WP Super Cache」と「WPTouch」を共存させようとするとエラーが発生します。

エラーメッセージ

WPTouch plugin detected! Please go to the Supercache plugins page and enable the WPTouch helper plugin

解決方法

「設定」→「WP Super Cache 設定」→「プラグイン」にて、「WPTouch」の項目を有効にして、更新ボタンをクリックします。

これで、エラーメッセージは消えて、PCとモバイルで別々に WP Super Cache のキャッシュを作成してくれるようになります。


参考情報

WPTouchとWP Super Cacheのエラーを消す方法 | とりせどどっとこむ