仕事にヒント » WordPress

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開発者」が、検証にとても役立ちました。

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

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

イケダヒロミ — 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テーマに関する参考記事はこちら。

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

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

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

WordPress Twenty Elevenカスタムヘッダー用画像

イケダヒロミ — Fri, 22 Jul 2011 23:08:30 +0000

WordPress 3.2は、かなり楽しい。
新テーマTwenty Elevenも好みです。

すぐにも出来るカスタマイズといえば、カスタムヘッダーということになると思います。
もしかして、誰かの役に立つかもと思って、Twenty Elevenカスタムヘッダー用のサイズ 1000×288pxの画像を作ってみました。

（10/27追記：徐々に追加し、現在は62枚の画像をアップしています。）

苔がいっぱいです。
また足していくと思います。
どうぞ、ご自由にお使いくださいなのです。

上記画像は、ローカルにMAMPで作った開発環境に、WordPress テストデータ日本語版（め組の小ネタ）をインポートした状態です。
トップページは固定ページで、テンプレートは「Showcase Template（ショーケーステンプレート）」にしています。

ソーシャルメディアマーケティングについて

イケダヒロミ — Wed, 06 Jul 2011 23:11:47 +0000

[連載]WordPressでWebサービスを作る方法（7:ソーシャルメディアマーケティング） – Stocker.jpを読んで、SMO（Social Media Optimization）について少し考えるようになりました。

ソーシャルメディアを使ったPRとか拡散て、あまり考えていませんでした。
自分自身のブログは備忘録のようなものだし、お客さんもそこまで力を入れてない（入れられない？）という感じです。

が、楽しみに読んでいる上記の連載記事を読んで、ちょっと考えが変わりました。
記事には、TwitterやFacebookなどソーシャルメディアで起こっていることについて「共感が引き起こしている行動」とありました。
そして、「人に伝えたくなるコンテンツでないと生き残ることは難しい」と。

この２つの太字にしたことは、自分がインターネットでしたいこと・関わりたいことです。
ならば、苦手だといって尻込みばかりせず、ちょっと始めなければ。

[連載]WordPressでWebサービスを作る方法（7:ソーシャルメディアマーケティング） – Stocker.jpを読んでいて、「コンテンツ」という単語に引っ掛かりました。
ホームページ制作の現場で、依頼主に「コンテンツ（内容）が重要です」とは云うものの、伝えきれてない感があります。
まさに共感を得ていない（涙）。

そこでググったところ、有益なwebコンテンツを生み出すための5つのノウハウ – ホームページを作る人のネタ帳に辿り着きました。
この記事もいい！
ブログネタに困ってるという方にも非常に参考になると思います。

まだまだ、ソーシャルメディアには及び腰の私。
まずはWordPressプラグイン「WP-tweet Button」でツイートボタンを導入。
（追記：zenback導入で利用は停止）
【WP講座3/3】ossam.jpで使っているプラグイン紹介 – ossam.jpという記事で、ソーシャル連携のためのプラグインの一つとして紹介されていました。
上記のStocker.jpの記事に寄稿されている、イセオサムさんのブログ記事です。

そして、アナログな私は本から学習。
『Facebookページ　プロフェッショナルガイド』を読むつもり。
しかし、これは「Facebookページ」に関する話題がメインのようです。
全くの初心者が読むのは間違っているかもしれません。

ま、それでも一歩ずつ。

WordPress 3.2ベータ版でベータ版なサイトを進行

イケダヒロミ — Fri, 01 Jul 2011 14:12:40 +0000

新テーマ「Twenty Eleven」を開発環境でごにょごにょ試してみましたが、ベータ版なサイトの立ち上げにそのまま使うことにしました。
「Twenty Eleven」の子テーマを作り、style.cssに余白やカラーをちょっと変更した程度のスタイルを上書き。
ヘッダ画像と背景画像は管理画面から変更しました。
後は、header.phpにGoogle Analyticsのトラッキングコードを挿入だけ。

それがこのサイト。
少しずつ、どうにかして行きたい。

WordPress3.2からの新テーマ「Twenty Eleven」を念頭に考える

イケダヒロミ — Thu, 30 Jun 2011 09:13:20 +0000

MAMPで構築した開発環境にWordPress 3.2ベータ版を追加してみました。
WordPressをもっと楽しむための電子書籍雑誌「WordPants（ワードパンツ）」を見ていて、あぁもうすぐ3.2かぁ〜と。
じゃあ、どうせなら新テーマ「Twenty Eleven」のカスタマイズでテーマ作りを考えてみるか！と思ったわけです。

噂の「WordPress 3.2 の新機能」を体験せよ！ | Odysseygate.comの記事を読み、予習。
インストールしたもののサイトのイメージ掴むにはデモデータがあるといいなぁと思っていたら、WordPress テストデータ日本語版 | め組の小ネタの存在を知りました。
め組マニュアルサイト、非常に有り難いサイトです。

そして、インストールしてみたら、おぉ！
好みなデザイン。

管理画面で、テーマのカスタマイズも色々出来るようです。
オリジナルのヘッダ画像をアップロードするなら「1000 × 288ピクセル」となっていたので、Twenty Tenより大きくなったなぁと思っていたら、ちと違いました。
ブラウザの幅によって変化します。

カスタム投稿・カスタムフィールドそして新しいテーマ、トライアンドエラーの要素がどんどん増えていきます。
公開に辿り着けるのか、ちょっと心配になってもきました。

WordPressのカスタム投稿・カスタムフィールドを学習

イケダヒロミ — Wed, 29 Jun 2011 11:31:41 +0000

新しいサイトを構想中。
WordPressのカスタム投稿とカスタムフィールドを使いたいと思い、試行錯誤しています。

試行錯誤するために、MacにMAMPで開発環境構築。
次の記事を参考にしました。

久しぶりのMAMP。
なーんも考えずにインストールしても、大丈夫。
MAMPを起動すると、
http://localhost:8888/MAMP/?language=Japanese で日本語のMAMPトップ画面が表示され、
WordPressのファイルをダウンロードし解凍して出来た「wordpress」フォルダを、「アプリケーション」フォルダの中の「MAMP」フォルダの中にある「htdocs」フォルダに入れたら、http://localhost:8888/wordpress/ でWordPressインストール画面が表示されました。

カスタム投稿・カスタムフィールドは名前は知っていても、取り組むのは初めて。
下記の記事を参考にして、トライアンドエラーを繰り返しています。

カスタム投稿（カスタムポスト）中心の記事

カスタムフィールド中心の記事

WordPressで投稿画像に「透かし」を入れる

イケダヒロミ — Mon, 02 May 2011 06:05:25 +0000

「Scissors Continued」というプラグインをインストールしてみました。
フルサイズの画像にコピーライト画像が入っています。

サンプルのコピーライト画像（watermark）が余りにもダメダメですが。