仕事にヒント » 道具

WordPressのテーマの変更と、OGPプラグイン『WP-OGP』導入

イケダヒロミ — Tue, 17 Jan 2012 08:32:33 +0000

えいやーっと、このブログで使っているWordPressのバージョンアップと、テーマの変更を作業しました。

デフォルトの「Twenty Eleven」の子テーマを作り、
自分で紹介していたヘッダ画像に変更し、
OGP対応のために、プラグイン『WP-OGP』をインストールしました。

プラグイン『WP-OGP』

先日、プラグインを使わないOGP導入を試したばかりですが、テーマを変更したので、今度はプラグインを試してみようと思いました。
WordPressのOGPプラグイン『WP-OGP』を正しく設定する方法 | IDEA*IDEAを参考に、修正・変更しました。

参考にした記事にある通り、プラグインファイルの「fb:appid」を「fb:app_id」へ変更。（でも、一箇所じゃありませんでした。
先日の記事にも書いた通り、を追加。（プラグインを変更するのは難しいので、header.phpに直書き）
記事に画像が無い場合の画像を差し替え。

Facebookのツール「Debugger – Facebook開発者」が、検証にとても役立ちました。

しばらく、様子を見て、テーマを変えたことでの不具合を確認します。

WordPressブログにプラグインを使わないでOGPを設定してみた

イケダヒロミ — Thu, 29 Dec 2011 10:48:57 +0000

WordPressには便利なOGP対応プラグインがあるらしいですが、プラグインを使わない方法を試してみました。
対象は、このブログです。

次の点が、今回の作業の主なポイントです。

個別記事には、それぞれ独自（URL、記事タイトル、説明文、画像など）の設定する: 個別記事とそれ以外を振り分ける
アイキャッチ画像は設定していないし、画像のない記事もある: 記事内の１枚目の画像を取得、無ければデフォルトの画像を表示させる
テンプレートファイルの改造をなるべく簡単に: PHPとか、サーバとか、参考書やネットの記事を読んでも、完全に理解できていないから危険

最初は、次の記事を参考に始めたのですが、失敗。
functions.php での絶対パス指定が間違っていたのだと思います。

WordPressで、OGP（The Open Graph Protocol）に完全な情報を反映させる | いろいろコードスニペッ卜

次に参考にしたのは、こちらの記事。
基本のソースは、こちらを参考にさせて頂きました。
しかし、画像が無いページはどうすりゃいいんだ？と。

備忘録：WordPressにFacebookのOGPを設定する（プラグイン無し） | ryodesignblog

投稿の最初の画像を取得して、無ければ設定したデフォルト画像を表示させる方法を探しました。
見つけたのが、次の記事。
記事のままでは何故かうまくいかず、「参照元」となっている英文記事を参考にしたら、思い通りになりました。

カスタムフィールド使わずに投稿の最初の画像を取得する簡単な方法 – （株）アイポケット　スタッフブログ

さらに次の記事を参考に、localeプロパティを追加。
アプリIDを取得しようとしたのに、画面遷移せず、FacebookユーザIDを設定。
と、何度もつまづきながらの作業でした。

facebook いいねボタンの仕様変更?OGPの設定についてまとめました（ localeプロパティについて） | HTML5でサイトをつくろう

最終的なソース例は、こちら。
使っているテーマにもよるとは思いますが、参考になれば。
投稿に画像がなかった場合、投稿以外のページの場合のデフォルト画像を default.jpgとしています。

function.php に画像URL取得のソースを追加

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('//i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/ogp_hint.jpg";
  }
  return $first_img;
}

html要素にxmlns属性を追加（header.php）

ヘッダにOGPのタグを追加（header.php）

誰も「いいね」してくれなきゃ、意味は無いんですけどね。

アプリID取得画面に移動できたので、上記ソースをアプリID版に変更しました。
また、デバッガーでエラーを見つけたので、下記部分を修正しました。（/を追加）

ドメインのトップページにもOGPを設定しました。
自分で「いいね」してみたし、アプリIDも取得したけれど、Facebookインサイトがゼロのまま。
インサイトのページにも、何も表示されません。

そういえば、アラートメッセージが出てました。
でも、英語でよー分からん。
ドメイン単位っぽいので、対象ドメインのトップページにもOGPを設定してみました。
すると、インサイトにも表示されました。

ソースを見なおしてみると、html要素にxmlns属性を追加はしてません。
og:typeは、website にしました。
追加だけでも良かったのかも。
これでなんとか、ちゃんと出来たかも。

FC2ショッピングカートにOGPを設定する

イケダヒロミ — Mon, 26 Dec 2011 06:04:31 +0000

「いいね！」ボタン設置に引き続き、FC2ショッピングカートにOGP設定を試みてみました。
ＦＣ２無料ショッピングカート商品ページにOGP(Open Graph Protocol)を設定したのは、「いいね！」をクリックしたときに情報が伝わりやすくするためです。
多分、うまく行ったので、記録。

OGPの設定について、下記の記事を参考にさせていただきました。

FC2カートには、ソーシャルボタン設置のオプションが無いので、テンプレート変数を参照しながら、ヘッダを変更しました。
下記に、参考ソースを載せます。

html要素にxmlns属性を追加

OGPのメタタグを追加

{if DSP_ITEMDETAIL}







{/if}

FC2ショッピングカートに「いいね！」ボタン

イケダヒロミ — Fri, 25 Nov 2011 11:28:25 +0000

ＦＣ２無料ショッピングカート商品ページに、Facebookの「いいね！」ボタンを追加しました。

FacebookのSocial Plugins > Like Buttonから、表示用コードを取得出来ます。
ただ、これだと、全ページ同じです。
商品ページごとに「いいね！」ボタン表示したいです。

そこで、「facebook like（いいね）ボタンを記事ページ（エントリーページ）ごとに表示｜WEBマスターのお仕事」を参考に設置しました。

しかし、ＦＣ２無料ショッピングカートは、タイトルタグ部分が全ページ共通です。
Facebookで表示されるページタイトルが、同じになってしまいます。
それでは効果も少ないかも…ということで、対処法を探しました。

そして、商品詳細ページのタイトルタグ、メタタグ設定をFC2の独自タグを利用してカスタマイズする方法を見つけました。
以前にFC2 ショッピングカートのテンプレートカスタマイズ用マニュアルを確認しつつも、解決法を見つけられなかった私…。

ともかくも、FC2 ショッピングカートの大きな弱点だと思っていたタイトルタグ・メタタグの重複を少し改善できました。
次は、OGPの設定か…。

Google Chrome デベロッパーツールの使い方を再確認

イケダヒロミ — Thu, 10 Nov 2011 00:15:26 +0000

HTML・CSSの調整に、Firefoxのアドオン（拡張機能）「Firebug」を使っています。
普段のブラウザは Google Chrome。

Google Chromeにも同じような機能の Google Chrome デベロッパーツールがあります。

ところが、パネルの表示が英語だし（それだけで…）と、イマイチ馴染めませんでした。

しかし、「Google Chrome Deveoper Tools」はこう使う！　基本機能チュートリアル & GDD 2011 セッション概要（CodeZine）という記事を見て、距離が縮まった気がします。
Firebugがあるからいいや…と思っていましたが、Google Chrome デベロッパーツールも積極的に使ってみようと思いました。

ネットショップ運営者向け情報

イケダヒロミ — Tue, 18 Oct 2011 10:43:36 +0000

ネットショップ運営者にとって、役に立つのではないかという情報をいくつか集めてみました。
まぁ、リンク集のようなものです。

ネットショップ運営に関する情報サイト

検索エンジン最適化とコンテンツ（内容）改善のための情報サイト

Google検索エンジン最適化スターターガイド　PDF版（ Version 1.1日本語版 2009年6月1日公開）
買いたくさせるWEBサイト文章術（ダイヤモンド・オンライン）
買いたい！と思う商品写真撮影・加工のコツ（楽天提供のAllAbout記事）

文章については、『これは「効く!」Web文章作成&編集術逆引きハンドブック』が、分かりやすいです。
「知識編」として、ウェブというメディアの特性やウェブサイト作りの基本的な知識も書かれています。
この本の著者のサイト「松下健次郎の「人を動かすウェブライティング」を参考にするのもいいと思います。

商品撮影については、参考書籍も多くあります。

フリー素材の情報サイト

やみくもに情報を参考にするのではなく、自分のショップサイトの課題と目標を見つけ出して、言葉にしてみるといいと思います。
そして、それを実現するための方法を多くの情報の中から探し、試し、検証するというのが必要になるのではないでしょうか。

検証方法の一つのとして、アクセス解析の利用があります。

GoogleがJimdoをPR？

イケダヒロミ — Mon, 26 Sep 2011 04:21:31 +0000

今朝、NHKニュースを見ていたら、Googleが新しいホームページサービスを始めたようなことが紹介されていました。
画面は、Jimdo。
Jimdoは、KDDIからGoogleに変わったのか？と思ったりしましたが、「みんなのビジネスオンライン」というサービスのことのようでした。

“15分で簡単作成”とあります。
確かにホームページという形を作るのは15分で出来ると思います。
しかし、肝心なのは、内容と運用。
簡単なヒント（ポイント）は「みんビズの心得」として、スライドが公開されています。

すでに中身があって公開方法を探していた場合は、試してみるといいかもしれません。
中小企業・個人事業主を対象とし、１年間は無料、２年目以降は有料となります。

アフィリエイトウィジェットを削除

イケダヒロミ — Fri, 12 Aug 2011 00:37:44 +0000

我ながら、アフィリエイトウィジェットのリンクがやかましかったので、削除しました。
楽天とAmazonと。
アフィリエイト収入少ないのに、ただ邪魔な感じのウィジェットを表示しておいてどーする！自分。
ついでに、サイドバーのGoogle Adsenseも削除し、代わりにといってはなんですが、このブログで利用しているレンタルサーバ「ロリポップ！」のバナーを追加。

zenbackの項目も少なくしました。
Twitterとかはてブとか無いですしね。
zenbackがあるので、Tweetボタンプラグインは停止。

あと、フッタのWordPressリンクを日本語ローカルサイトへ変更し、バージョン表示を無くしました。
ちょっとずつ、気付いたことに対処。

Twenty Elevenテーマの「Media Queries（メディアクエリ）」

イケダヒロミ — Mon, 01 Aug 2011 06:21:55 +0000

Twenty Elevenになって「ブラウザの幅によって変化する」ことに気付きました。
新しい情報には鈍い方ですが、様々な機器への対応は特に疎いです。
パソコン向けに作っていても割とちゃんと見れますし、完全に後回し（いや、置き去り）でした。

しかし、「Twenty Eleven」の動作を見て、興味を持ちました。
「Media Queries（メディアクエリ）」という、CSS3の機能なのですね。
次の記事に解説とチュートリアルがあります。

「Twenty Eleven」style.css の Responsive Structure 以下に指定があります。
odysseyさんによるTwenty Eleven テーマ内説明の日本語訳を見ると、「レスポンシヴ構造」と訳されています。
そして、今度は「レスポンシヴ構造」への興味へ。

次の記事を見つけたのですが、「レスポンシブ・デザイン」「レスポンシブ・ウェブ」と同じかしら。
リキッド・レイアウトは苦手だったので、Media Queries（メディアクエリ）を使ったレスポンシブ・デザインの方が上手くやれそうな気がします。

Twenty Elevenの「投稿フォーマット」による違い

イケダヒロミ — Wed, 27 Jul 2011 09:04:24 +0000

WordPressの新しい標準テーマ「Twenty Eleven」をもっと理解したいと調べたり、表示を確認したりしています。
気になったのは、WordPress3.1より追加された投稿フォーマットです。

新しいウィジェット「短冊」について書かれたWordPress日本のブログには、次のように書かれています。

複数の文章・段落から成る「ちゃんとした」記事を標準とすれば、ちょっとした短い記事はアサイド、リンクが主でそれにちょっとコメントする程度の場合はリンク、同様に引用が主の場合は引用、一枚の画像を対象とした画像、Twitter のひとつの tweet のような近況報告はステータス……

Codex の各投稿フォーマットについての説明をざっくり要約すると、次のようになります。
※がついている日本語表記の正式版は現在検討中とのこと。

aside（アサイド※）: 通常タイトルなしで表示。Facebook の Notes のようなもの。
chat（チャット）: チャット履歴。
gallery（ギャラリー）: 画像ギャラリーimage（画像）単独の画像。
link（リンク）: 他サイトへのリンク。
quote（引用）: 引用文。
status（近況 ※）: 通常140程度の短い近況アップデート。Twitter のツイートのようなもの。
video（動画）: 単独の動画。

実際、どう表示されるか、MAMPで構築したローカルの開発環境で確認してみました。
ざっくり言っちゃうと、「短冊」に表示されるかどうかやレイアウトが異なります。
どうでもいいって感じかもしれないので、記事の最後にまとめました。

投稿タイプごとにCSSを指定したり、対象のテーマテンプレートファイル content-*.php （リンクなら content-link.php）を変更することで、レイアウトをカスタマイズ出来ると思います。
カスタマイズは、子テーマ作成でのカスタマイズがいいと思います。
子テーマについては、次の記事が参考になります。

ほか、「Twenty Eleven」の理解に、参考にさせて頂いている記事がこちら。

Twenty Elevenに限った情報ではないですが、投稿フォーマット・WordPressテーマに関する参考記事はこちら。

投稿フォーマットを変えた場合の、同じ記事のカテゴリページでの表示

表示の違いが一番出ると思われる、カテゴリ一覧ページでのスクリーンショットです。
文章・リンク・引用・画像の要素を入れた全く同じ記事を、投稿フォーマットだけ変えてみました。（この方法に意味あるのかも不明ですが、とにかく記録）
「短冊」でのサンプル記事の表示には囲みを付けています。

投稿フォーマット：標準
投稿フォーマット：標準
投稿フォーマット：リンク
投稿フォーマット：ギャラリー
投稿フォーマット：ステータス
投稿フォーマット：引用
投稿フォーマット：画像