Tag Archive for WordPress

Facebook と WordPress でやりたいこと(ただのリストです!)

facebook_64ここ数日、簡単に「Facebookページ」を作成してしまったので、いろいとろ手を出していますが、一体何をしたいのかが不明確になってきた・・・まったくテニスとは関係ないけど、ちょっと総括してみよう、と考えて・・・以下、本ブログで実現したいことをリストしておきます。

  1. 「いいね!」ボタンの設置
  2. コメント付き「いいね!」ボタンの設置
  3. 上記を Facebook 上に可能な限り詳細にリンクすること(これが OGP ってやつかな・・・)
  4. Facebook 上でのコメントを WordPress 上で表示すること
  5. 「Facebookページ」上の「いいね!」もカウントすること
  6. WordPress に Facebook にログインした状態でコメントを返信すること

どれが実現できて、どれが実現できないのか・・・今のところまったく不明ですが、第1、2 項は WordPress のプラグインで解決できるのですが、より詳細をリンクできるようにするためには、OGP が必須!?知識も無いのに、先行して「Facebookページ」なんて設定してしまったので・・・どんどんやりたいことが噴出する・・・いけませんね~

Facebook の Open Graphic Protocol (OGP) が機能しない!

【追記:2012年01月30日】
何度も何度も Try and Error を繰り返していますが、やはり上手くいきません・・・と、そんな時、「glad design blog – Crazy One -::【WordPress】Facebook OGP 設定手順メモ」という投稿記事を見つけました。それによれば、以下の通りです。

普通にやれば普通に反映されるはずなのですが、何故かうまく反映されない、という事態に遭遇しました。URLリンターでチェックして、問題ないのに、ブログではイイねボタンが機能しなかったり、逆にリンターでエラーが出ているのに、イイねボタンが機能したり。いろいろと調べまくっても、まったく原因がわからず、他の用事をすませて、あらためて取り掛かると治っていたり・・・・。これがFacebookの仕様か・・・と思うほどでした。

な~んだ・・・私だけではありませんね、上手くいっていない様子は・・・しかも「「いいね!」ボタンが機能していたり、していなかったりでその原因がまったく理解できないと同じ状況!暫く様子を見ようかな、と考えています。まっ、それでも参考になりそうなウェブページをリストしておきましょう。

【公開時、投稿記事】
先日、Facebook 内に本ブログ用の「Facebookページ」を作成しました。作成には「webox blog::Facebookページ作成からWordPressとの連携までの道のり」を参考にさせて頂きました。詳細に渡って解かり易く「Facebookページ」の作成方法が記述されていますので簡単に設定できます。

そして「次」として、「ブログに OGP を設定する」ってことになったのですが、OGP ってのは以前チャレンジして断念しているので、今回はリベンジといったところでしょうか。まずは、OGP とは・・・から復習しました。

OGP とは

OGP とは、Open Graphic Protocol の略であることは知っていたのですが・・・「 IT戦記::フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か」が解かり易いと思いますのでちょっと引用しておきましょう。

簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。(中略)決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。

なるほど、とっても簡単だ!しっかし・・・どうしてこれが重要なの?ってことで上記の投稿記事からその重要性を引用しておきましょう。

(Facebook)「いいね!」ボタンや(mixi)「チェック」ボタンで、ウェブページが紹介されるようになって、ウェブ中の様々なウェブページがどんどん SNS の中に流れ込んでくるようになっているんですね。で、そうすると当然 SNS の中でそのページをどう表現すればいいか(リンクテキストはどうすべきか、画像はどうすべきか、どこに表示すべきか)という問題が出てきます。そこで、最近さまざまな SNS サイトで使われるようになった仕様が OGP なんですね。

私のような素人はここまで読めば、なんとなく OGP が Facebook との連携では重要だ、ってところは理解できそうです。WordPress を利用していますから、プラグインがきっとあって、ちょろちょろっと設定すれば、きっと機能するんだろうな~ってことでやってみたわけです!

WordPress のプラグイン、WP-OGP の設定
「webox blog::Facebookページ作成からWordPressとの連携までの道のり」にあるプラグイン、「WP-OGP」を利用して Facebook の OGP を設定しようと考えましたが、何やらコードを修正する必要がありそうです・・・そこで、他のプラグインが無いかと探したのですが・・・「IDEA*IDEA::WordPressのOGPプラグイン『WP-OGP』を正しく設定する方法」に記述されていますが、どうやらあまり選択肢がないようです。「まっ、詳細が説明されているから大丈夫だ!」と心に誓って、本ブログでも「WP-OGP」を利用することにしました!

プラグインのインストールは割愛します。通常のインストールとまったく同じです。そして「WP-OGP」の設定ですが、次の2項目の設定のみです。

  • アプリケーション ID
  • Facebook のユーザ ID

「アプリケーション ID」は、「Facebook Developers」へ行き、メニューの「アプリ」から新しいアプリを作って(「App Display Name」はブログ名、「App Namespace」は空欄で)登録していくと「アプリケーション ID」が取得できます。

「ユーザー ID」ですが・・・これが曲者!とにかく見つからず、四苦八苦しましたが最も簡単な方法は、https://graph.facebook.com/(ユーザー名)にアクセスして調べるのが最も簡単なような気がします!当然ですが「ユーザー名」を既に獲得している御自分のものに書き換えます。すろと・・・「id」ってのが登場してくれます。

これで「WP-OGP」の設定は終了!そして、コードの修正を実施します。ガイドラインに沿って・・・修正箇所は以下の通り。

function load_wpogp_settings() {
    global $ogpt_settings;
    $ogpt_settings['fb:appid']  = get_option(OGPT_SETTINGS_KEY_FB_APPID);
    $ogpt_settings['fb:admins'] = get_option(OGPT_SETTINGS_KEY_FB_ADMINS);
}

上記の部分の「fb:appid」を「fb:app_id」に修正します。つまり以下のようになります。

function load_wpogp_settings() {
    global $ogpt_settings;
    $ogpt_settings['fb:app_id']  = get_option(OGPT_SETTINGS_KEY_FB_APPID);
    $ogpt_settings['fb:admins'] = get_option(OGPT_SETTINGS_KEY_FB_ADMINS);
}

そしてもう一箇所。「wpogp_image_url()」関数の部分を書き換える必要があるそうです。

function wpogp_image_url() {
    global $post;
    $image = get_the_post_thumbnail_src(get_the_post_thumbnail($post->ID));
    if ( empty($image) )
        { return wpogp_image_url_default();}
    else
        { return $image; }
}

上記を以下の通りに修正。

function wpogp_image_url() {
    global $post;
    // $image = get_the_post_thumbnail_src(get_the_post_thumbnail($post->ID)); ← こちらをコメントアウト
        $image = get_the_post_thumbnail_src($post->post_content); // ← こちらを追加。
    if ( empty($image) )
        { return wpogp_image_url_default();}
    else
        { return $image; }
}

更に、テーマファイルの header.php の HTML 宣言文を以下に書き換えます。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

意外に簡単だな・・・そして、上手く機能してるかどうかをチェックするために、Facebook が提供するテストツール「Debugger – Facebook Developers」にブログの個別記事の URL を入れてテスト!

ところが・・・テスト結果は・・・サムネイル・・・表示されません!不思議なことは、「WP-OGP」の Default のファイルを変更しても下記とまったく同じ結果になります。何で???

20120128_OGP_Results

「Facebookページ」自体は、RSS を取得させて自動的に投稿記事を掲載するようにしていますから、普通に閲覧していただくことはできるのですが、「いいね!」ボタンはどうやら不思議な画像で埋め尽くされそうです・・・何がいけないのかな~何度も何度も修正部分を読み返しましたが、正しい・・・はずなんですけど・・・

Facebook Insights って何?WordPress のプラグイン「All in One Webmaster」で設定

最近、WordPress のプラグインである「All in One Webmaster」をアップグレードしました・・・まっ、単純に「ダッシュボード」にアップグレードできるよ、ってメッセージが自動的に表示されたので、言われるままにアップグレードしただけなのですが。

久し振りに、この「All in One Webmaster」の設定画面を覗いてみると・・・「Facebook Insights」ってのが設定できるようになっている!何じゃこりゃ?いつから設定できるようになっているのか解からないし、この「Facebook Insights」ってのが一体何なのかも不明。ちょっと調べてみると・・・

Facebookが新たに、サイトやブログに導入した「いいね!」ボタンなど、いわゆるFacebookが提供するSocial Plug-inの利用状況を解析するFacebook Insightsという機能を提供し始めた・・・(出典:「[M] mbdb::Facebook Insightsの高度な解析機能を早速導入したので簡単にまとめ」より)

なるほど・・・Facebook が提供している「いいね!」ボタンに関する分析を実施してくれるのね・・・上記、引用で御紹介させていただいている投稿記事を読んで頂ければ、誰でも設定できると思いますので、本投稿記事ででは詳細を割愛します。本ブログでは、「いいね!」ボタンをあまり意識したことがありませんが、何といっても簡単に設定できるので、とりあえず設定しておきました。

今や Facebook が無視できなくなってきましたから、ちょっと詳細を勉強してみようかな、とも思っているのですが・・・「いいね!」ボタン、押して下さいね~(なんちゃって・・・)

WordPress の「カスタム投稿タイプ」を実装しようとしたけど、何やら問題が発生してしまった!

【追記】
「かちびと.net」さんのところで御紹介頂いた「カスタム投稿タイプ」を利用するための「Custom Post Type UI」というプラグインを利用してどこまでできるのかをネットでいろいろと調べていましたが、どうやら以下の投稿記事が本ブログで実現したいことを最も詳細に説明してくれているようです。

プラグインの利用に変更しようかな・・・

【公開時、投稿記事】
昨日、テニスに関する投稿記事と WordPress 関連の投稿記事を分類したいということを公開しました!(投稿記事「WordPress の「カスタム投稿タイプ」を利用して、テニスブログから WordPress 関連の記事を分割する?」参照)

ネットで検索して「かちびと. net::WordPressのカスタム投稿タイプとカスタムタクソノミーを使って新たに別のコンテンツを作ったので、制作プロセスを書きました」に出会って、これで実現できると確信を持ちました。

まずは、上記の投稿記事にあるコードを利用して「カスタム投稿タイプ」の下地を作成・・・本サイトでは、function.php を書き換えるのが嫌だったので以下のようなプラグンにしました。だったら、既に市場にあるプラグインで良いじゃん、と思われるかもしれませんが、市場に登場しているプラグインは自分好みに変更するのが大変なので、まずは上記のようにコードを自分で書いてみたいというのが理由なのですが。

<?php
/*
Plugin Name: AAA-ZeroCustomPost
Plugin URI: http://kachibito.net/wordpress/building-new-contents.html
Description: 「俺流!テニス論 2.0」内にカスタム投稿タイプを設置する
Version: 1.0
Author: Zero Cool
Author URI: http://www.attack100.net/
*/

add_action('init', 'my_snippet_init');
function my_snippet_init()
{
  $labels = array(
    'name' => _x('WP関連投稿記事', 'post type general name'),
    'singular_name' => _x('WP関連記事一覧', 'post type singular name'),
    'add_new' => _x('新しくWPの記事を書く', 'snippets'),
    'add_new_item' => __('WPの記事を書く'),
    'edit_item' => __('WPの記事を編集'),
    'new_item' => __('新しい記事'),
    'view_item' => __('記事を見てみる'),
    'search_items' => __('記事を探す'),
    'not_found' =>  __('記事はありません'),
    'not_found_in_trash' => __('ゴミ箱に記事はありません'),
    'parent_item_colon' => ''
  );
  $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'menu_position' => 5,
    'supports' => array('title','editor','thumbnail','custom-fields','excerpt','revisions','page-attributes'),
    'has_archive' => true
  );
  register_post_type('snippets',$args);
}

//投稿時のメッセージ
add_filter('post_updated_messages', 'snippets_updated_messages');
function snippets_updated_messages( $messages ) {

  $messages['snippets'] = array(
    0 => '',
    1 => sprintf( __('記事を更新しました <a href="%s">記事を見る</a>'), esc_url( get_permalink($post_ID) ) ),
    2 => __('カスタムフィールドを更新しました'),
    3 => __('カスタムフィールドを削除しました'),
    4 => __('記事更新'),
    5 => isset($_GET['revision']) ? sprintf( __(' %s 前に保存しました'), wp_post_revision_title( (int) $_GET['revision'], false ) ) : false,
    6 => sprintf( __('記事が公開されました <a href="%s">記事を見る</a>'), esc_url( get_permalink($post_ID) ) ),
    7 => __('記事を保存'),
    8 => sprintf( __('記事を送信 <a target="_blank" href="%s">プレビュー</a>'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
    9 => sprintf( __('記事を予約投稿しました: <strong>%1$s</strong>. <a target="_blank" href="%2$s">プレビュー</a>'),
      date_i18n( __( 'M j, Y @ G:i' ), strtotime( $post->post_date ) ), esc_url( get_permalink($post_ID) ) ),
    10 => sprintf( __('記事の下書きを更新しました <a target="_blank" href="%s">プレビュー</a>'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
  );
  return $messages;
}
?>

ほぼ完璧と考えていたのですが・・・以下のエラーメッセージが出て機能しない・・・

error/warning/notice:
array ( ‘type’ => 2048, ‘message’ => ‘Non-static method KtaiServices::get() should not be called statically,
assuming $this from incompatible context’, ‘file’ => ‘…../plugins/ktai-style/ktai_style.php’, ‘line’ => 117, ) | length: 3

何が何だか理解できず!そこで恥を忍んで「かちびと.net」さんへ質問してみました。丁寧な回答と可能性のある原因を説明して頂きました!素晴らしいですね・・・見ず知らずの私のような素人に・・・感謝感激です。

で、調べてみたのですが、どうやら、PHP のバージョン問題でもなさそうだし・・・そこで、「かちとび.net」で説明頂いたように、プラグインを一つ一つ調べようと決心して・・・

上記のエラーメッセージにある「Ktai-Style」のプラグインをまずは無効化。すると今度は、同じようなメッセージで「AddQuicktag」でなにやら起きている・・・そこでこれも無効化。すると・・・問題無く機能しだしました!

つまり、上記の方法で「カスタム投稿タイプ」を運用するためには、少なくとも「Ktai-Style」と「AddQuicktag」のプラグインを無効化する必要がありそうです。「Ktai-Style」は今や WordPress に標準で装備されているようですから削除するとしても、「AddQuicktag」はかなり重宝しているので可能であれば有効化しておきたい!

ちなみに、「カスタム投稿タイプ」を実装するために「SEOテンプレート比較:Custom Post Type UIの使い方::カスタム投稿タイプの導入方法 – WordPressのプラグイン」という投稿記事の御紹介を頂きました。このプラグインを利用すると何も問題なく機能するようです。即ち・・・「Custom Post Type UI」を利用して「カスタム投稿タイプ」を有効化し、更に「AddQuicktag」も問題なし・・・

う~ん・・・どうなってんだ~もうちょっと研究してみます!

WordPress の「カスタム投稿タイプ」を利用して、テニスブログから WordPress 関連の記事を分割する?

【追記】
「カスタム投稿タイプ」を利用して、下記の目的(テニスブログと WordPress といったテーマを分割する!)を達成するために、とにかく「これだ!」といった内容の公開記事を見つめました!素晴らしい・・・

投稿記事を読んでみると一筋縄ではいかない様な気がしますが、それでも実現できないような内容ではなさそうです!

【公開時、投稿記事】
最近、なぜか「WordPress を利用して自分でテニスブログをやってみたいのですが・・・」という質問を頂戴致します。私、WordPress のプロではありませんから、御指導できるほどの知識を持っているわけではないし、かといって初歩的な知識はありそうだし・・・全てが中途半端ですが、本ブログもかなり本気モードで WordPress を利用していることは事実です。

しかし・・・

テニスブログに WordPress や IT 関連の投稿記事が増加していくことにはちょっと違和感があるな~って感じてしまいます(既に増加傾向がありますが・・・)。一方で、一つの投稿記事内の一部分だけを非公開にしたり、大会の勝敗表を一括管理したりしてブログに貼り付けると言ったことは、実は WordPress ならではの簡単さがあり、テニスブログのような特徴があるブログには役に立ちそうな機能も豊富にあります。つまり、結構、ネットで収集した WordPress に関する Know-How は散りばめています・・・テニスと WordPress というこのまったく関連のないような内容を、一見、分割しているようで連結しているようにならないかな~って試行錯誤しています。

そんな中、「ja.naoko.cc::WordPress のカスタムフィールド・投稿タイプ・タクソノミーを使い分けよう!」という投稿記事を発見しました!
ja.naoko.cc

ちょっと気になる内容を引用しておきましょう。

カスタム投稿タイプを使えば、「投稿(post)」「固定ページ(page)」のような、投稿(記事)のグループを作れます。例えば「レシピ(recipe)」というカスタム投稿タイプを作り、デフォルトのブログ投稿や個別ページとは独立して管理できます。

上記からすると、「カスタム投稿タイプ」を利用することでデフォルトのブログ投稿や個別ページとは独立して管理できる、ってことになりますから、デフォルト(私の場合はテニスブログ)とは独立して WordPress 関連を独立して管理することができる・・・ってことになる!

更に、投稿記事は続きます。

カスタムタクソノミーで、通常の投稿につけられる「カテゴリー」「タグ」のような、分類のグループを追加して作れます。(中略)そして、カスタムフィールドを使えば、投稿や固定ページなどの入力画面で任意の属性と値を追加できるようになります。

どうやら実現するための光が見えてきたような気がしますが・・・何はともあれ、「カスタム投稿タイプ」ってやつを勉強する必要がありそうです。

検索結果に投稿記事のみを表示させるようにする方法

本ブログの検索機能・・・一番利用頻度が多いのは何を隠そう「私」であることは間違いないでしょう!「あれっ!?以前も書いたよな~」とか「あれって書いたかな!??」なんて事がしょっちゅうですから。つまり、私にとって一番重要なな機能が「サイト内検索」の機能なんです(一般の方々にはまったく関係がないかもしれませんね~)

しかし、本ブログの検索機能では「固定ページ」も検索してくれて表示するんです。これって意外とうっとうしい。必ず、フロントページを表示するし、いきなり固定ページが登場するのでビックリしたり・・・「固定ページ」を検索結果から省けないかな、とずっと考えていました!そして・・・見つけました、検索結果に投稿記事だけをリストする方法を!

「Webクリエイターボックス::WordPressの検索機能をもっと使いやすくする」と言う投稿記事。いろいろな検索方法を実現するための Know-How が説明されていますが・・・私の願いを叶えてくれるのは、その中の「投稿記事のみ表示する」というセクション。きゃぁ~しかも functions.php に数行加えるだけ!やるっきゃない・・・

function SearchFilter($query) {
if ($query->is_search) {
$query->set('post_type', 'post');
}
return $query;
}
add_filter('pre_get_posts','SearchFilter');

上記のコードを funtions.php へ加えるだけで実現できる・・・素晴らしい!

コメント欄に「Spam Free WordPress」を導入

最近、アクセス数の増加と共に SPAM も増加する・・・ブログ運営の上で避けて通れない宿命ですね・・・きっと。何とかこの SPAM を避けたい!いろいろと試行錯誤して、いろいろなプラグインをインストールしてみたのですが。

結局は「Spam Free WordPress」というプラグインをインストールしました。

SPAM Free WordPress

最近ではコメント欄に「キャプチャ」とか呼ばれる数字や英字の画像が登場してコメントをコメントをする度に入力を求められますが・・・あれってめんどくさいし読み辛いし。もっと簡単に、それでいて確実に Spam を避ける方法は無いかと考えていたのですが。上記に「Spam Free WordPress」は、Password をコメント入力時に求めますが、「Copy & Paste::コピペ」でOK!ただ、コメントを頂ける方全てにマニュアルで入力を要求するため、自動でコメントを投稿する事はできなくなります。

良いじゃん!簡単で・・・

あまり迷惑をお掛けすることなく、Spam を減らすことができそうです。既にコメントを頂いている方々にはちょっとだけお手間をとらせてしまいますが、ちょっとだけ我慢して頂いて、今後とも宜しくお願いします!

ちょっと下品かな~フロントページのアフェリエイト

最近変更した本ブログの Theme ですが・・・何と「アフェリエイト」用にウィジェットが準備されています。即ち、宣伝用のバーナーをテンプレートとして埋め込むことができるんですね。

そこで、そのテンプレートを最大限に利用しようと考えて、アフェリエイトを目一杯埋め込んでみました。本ブログ、テキストが多いのでちょっとしたワンポイントのイメージは良いのですが、閲覧して下さっている方々にはどういった印象でしょうか?

ちょっとうるさい感じもするのですが・・・この「アフェリエイト」の大きさに合わせて、フロントページのレイアウトをちょっと変更しました。まっ、デザインは慣れもあるでしょうから暫くはこのデザインで貫こうかな、って考えているのですが。

WordPress を 3.3.1 へアップグレードしました!

本日(2012年1月4日)、本サイトで運用している WordPress を 3.3.1 へアップグレードしました・・・まっ、これまでも最新版を採用してきていますから何も特別ではありませんが、最近、テニス関係者の中から「私も WordPress で運用したい」と言って下さる方が増加してきたので、WordPress に関する内容ももうちょっと公開していこうかな・・・と考えていますので。

WordPress は、一度、サーバーにセットアップしてしまえば、アップグレードが必要な時に自動でメッセージを出してくれますので、毎度毎度、アップグレードが必要かどうかを確認する必要がありません。

また、アップグレードは、いったん設定が終わってしまえば管理画面から自動でアップグレードを実施してくれますので、ファイルをダウンロードして、ファイルを解凍して、アップグレードする・・・なんて作業がまったく必要ありません。

誰でも簡単にアップグレードを完了することができますので・・・

WordPress

「Light SEO」で投稿記事のタイトルを「(記事タイトル)+(ブログ名)」で表記させる

本ブログの Theme を完全に別物に変更して数日が経過しました。ほとんど、修正は完了しているのですが、1つだけ大きく以前と相違していることがある!それが投稿記事のタイトル。

以前は、「(投稿記事タイトル)-(ブログ名)」となっていたのですが、新しい Theme では「(ブログ名)+(投稿記事タイトル)」として表記される・・・これって、どうでも良いことのようですが意外とうざい。第一、検索エンジンで過去の記事を新しい投稿記事として認識してしまうようです。アクセス解析でも「別物」として扱う・・・

つまり「Theme をリニューアル – 俺流!テニス論 2.0」というのが以前の投稿記事だとすると新しい Theme では「俺流!テニス論 2.0 – Theme をリニューアル」となってしまう。まったく同じ内容であっても。

そこで、以前と同じタイトル表記にするために「Light SEO」という WordPress 用のプラグインを導入しました。このプラグインで以前と同様のタイトル表記に設定することができます。

上記のような問題を最初から払拭するために「Light SEO」を最初からインストールしておくのも良いかもしれませんね!

Light SEO