‘WordPress’ タグのついている投稿

【WordPress】URLに変なパラメータが付加されGoogleにインデックスされている

2013年10月14日 月曜日

私が管理しているサイトのひとつで、URL に変なパラメータが付加されて更に Google にインデックスまでされているという妙な現象を見つけました。Google で検索しても情報が見つからないのでレアケースなのでしょう。

URLの後に「?p=yeolgdznqo」だの「?attachment_id=」だの「?newwindow=true」等が付いています。ページの中身は、パラメータが無いものと同じですが、Google 的には重複ページ扱いされているので尚更質が悪いです。

ここは PHP で何とかします。アクセスしているページに?からの変なパラメータが付いていたら、パラメータなしのページにリダイレクトするという PHP を書けば Google のインデックスも治るし重複も無くなる筈。

「君の音。」のリニューアル&サイト構築を担当しました

2013年9月21日 土曜日

ピアノプレイヤー真島こころさんの即興ピアノ演奏を扱う音楽サイト「君の音。」のサイトリニューアルを担当しました。前からサイトのデザインについてお困りだったようなので、半ば私から提案させて頂きました。
元 Web デザイナーがここにおりますよと。

真島こころさんからのご要望

今までにも誰かにサイトのデザインをしてもらった事があるようですが、デザインが画像でカッチリ固められていて自分で拡張などカスタマイズが出来ない事を気にかけていらっしゃいました。ご要望は以下のような感じ。

  • 新しいページを増やす等カスタマイズが簡単に出来るようにしてほしい。
  • 作曲依頼を仕事として受付けるのでサイトをプロっぽくしたい。
  • とにかく見やすく、わかりやすく。
  • サイト内検索ができたら嬉しい。
  • サイトのロゴはピンクの丸い花びらをイメージしたもので。
  • 作曲依頼のメールフォームのスパム対策、迷惑メール対策。

今までタグを手打ちで更新していらっしゃったようなので、WordPress でサイトを一元管理できるように構築する事にしました。

サイト構築

html5 でマークアップしています。html5 といえば、ブラウザによって対応状況がまちまちでまだ使えないと思っている方もいらっしゃるかと思います。後述しますが、状況が変わってきて古いブラウザでも html5 に対応できるスクリプト等が登場して十分使える状態になってきています。

対応ブラウザ

IE7 までは対応しています。IE6は時代の流れに乗って捨てました。自宅にIE9以下の環境がないので、ツールでしか確認できていませんが多分 IE7 以降で見れる状態だと思います。

その他のブラウザは使っていたら意識しなくても最新になっていると思いますので、Google Chrome、Firefox、Opera に対応しています。

ビフォーアフター



トップページ

キーカラーは濃いピンクに設定。トップページは企業サイトによくある画像スライダーを設置。大きな告知事がある時に使ってもらえるように。また、文字を大きめにして読みやすさを意識しました。

更新履歴は、新しい投稿を書けば自動で表示されるように。従来のサイトでは、更新履歴に書かれていてもどこが更新されたのかわかりにくい気がしたので、リンクで該当記事へ行けるようにしました。

即興音楽ページ

サイトのメインコンテンツであるピアノ即興曲のページです。ここについてはこだわりがあるようで、色々なご要望がありました。

  • ジャケットはクリックしたら別画面で拡大表示できるように。
  • 曲の色カテゴリは直感的にわかりやすくしたい。
  • 投票機能をつけたい。
  • 曲のダウンロード数がわかると良い。
ジャケットはクリックしたら別画面で拡大表示できるように。

従来のサイトでもジャケットの文字をクリックすれば、別窓が開く仕様となっていました。これはユーザーにとってあまり優しくない仕様ですので、ジャケットは最初から見えるように。クリックすれば別窓は開かず、同じ画面のまま拡大表示するようにしました。

以下のプラグインを使用しています。

WordPress ? WP jQuery Lightbox ≪ WordPress Plugins

想像以上という事で上々の反応を頂けました。

曲の色カテゴリは直感的にわかりやすくしたい。

今までは色カテゴリは文字だけで表現されていましたが、背景に色を付けて横3列、縦3~4列で表示しました。

曲に人気投票機能を付けたい

これには以下のプラグインを使用しています。

WordPress ? WP-PostRatings ≪ WordPress Plugins

曲のダウンロード数がわかると良い。

これには以下のプラグインを使用しています。

WordPress ? Download Monitor ≪ WordPress Plugins

視聴プレイヤーについて

ブラウザ上で視聴できるプレイヤーと言えば、大抵が FLASH を使ったものです。従来のサイトでも dewPlayer を使われていました。

最近は、スマホやタブレットで Web 閲覧する人が多いのですが、その端末である iPhone, iPad, Android は FLASH 非対応となりました。携帯端末では視聴できないとか結構な致命傷です。

●そこで html5 の audio タグ
特にプラグイン等必要なく、音声ファイルを再生できます。しかし、古いブラウザでは対応していません。それは以下のもので対応します。

[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media | コリス
古いブラウザでも audio タグが機能する素敵スクリプト

基本は WordPress の AudioPlayer プラグインを使い、以下を参考に html5 で動作するようにカスタマイズする事にしました。

wordpressのプラグイン「Audio Player 」をiPhoneではHTML5で動作させる ≪ WeBridge

iPhone でも iPad でも Android でも IE7,8,9 でもしっかり再生できるようになりました。

作曲依頼のメールフォームのスパム対策、迷惑メール対策。

スパムや心なき迷惑メールに結構お悩みのようでした。まず、スパムは WordPress のスパム対策最強プラグイン「Akismet」で概ね解決。

次に迷惑メールですが、WordPress 標準のコメントブラックリストで対応。メールフォームプラグインの Contact Form7 もその設定を拾ってくれるようなのです。

制作後記

以上、フリーランスのWebデザイナーのまね事をしてみたかったのでこんなブログ記事を書いてみました。

サイト構築期間:約2週間。

自分のこのサイトよりも良いものができちゃて、自分のサイトもこんな風にしたいです(笑)
久々のサイト制作&リニューアル楽しかったです。

【WordPress】PostMash customで記事を並び替えるが記事が重複する事象

2013年9月18日 水曜日

PostMash custom とは投稿記事を日付関係なく自由に並び替える事ができるプラグインです。

記事は並び替える事が出来たのですが、何故か記事がいくつか重複する問題が発生しました。やった事と言えば、プラグインをインストールし、「投稿」メニューの「reorder posts」から記事を並び替え、下記コードをテンプレートに挿入しました。

if(have_posts()) の前に下記のコードを追加する。
<?php
$wp_query->set(‘orderby’, ‘menu_order’);
$wp_query->set(‘order’, ‘ASC’);
$wp_query->get_posts();
?>

プラグインの相性問題かと思い、他プラグインを全部無効にしましたが解消せず。

上記のコードを消したら、重複は消えました。代わりに並び替えも無効になりましたが。となると挿入したコードが問題という事になりますが「PostMash custom」を紹介しているサイトはどこでも上記のコードを挿入する手順が書かれており、これが間違っているとは考えにくい。これは詰んだか。

プラグインの公式ページ(英語)に行けば何か手がかりがあるんじゃないかと思って見に行きました。

PostMash Custom – custom post order for custom post types | Torstein Opperud – Art Direction, design & ideutvikling

公式サイトにも上記の挿入コードが書かれています。しかし気になる記述を見つけました。

Instruc-tions for Twenty Ten

いつも WordPress でサイトを作る時は、標準で入っているテーマをカスタマイズして独自デザインを作っています。その、カスタマイズ元のテーマが「Twenty Ten」だったのです。ようは、Twenty Ten のテーマの場合はコードの挿入場所が違いますよという事を言っているんだと思います。

試してみたら問題が解決しました!

投稿記事を並び替えるプラグインってあまりないんですよね。そして紹介しているサイトも少ないです。ニーズがないんだろうか。