きまぐれ事典

ウェブデザイナーがあれこれきまぐれにつづる日々のくらしの百科事典。

ブログちょこちょこ改造記

Posted on | 2011年 4月 25日 | Permalink

【WordPress】
WordPress(ワードプレス)はデータベースにMySQLを利用し、PHPで書かれたオープンソースのブログソフトウェアである。b2/cafelogというソフトウェアの後継として開発された。GNU General Public License(GPL)の下で配布されている。

WordPress

ちょっと前からちょこちょこと、コソコソと、このブログをいじったりしています。見た目的にはほとんど変化に気付いてもらえないくらいかな。マイナーチェンジ程度。おもに手を入れたのは中身、仕組み的な部分の方ですね。きまぐれ事典はWordPressを利用したブログなんですが、WordPressってネット上にたくさんの情報がありますし、便利なプラグインもたくさん開発されていますので、簡単に自分の好きなようにカスタマイズ出来てしまうんですね。以前はMTを少し触ってたのですが、今はWPの方が好きかなあ。ネット上を見回してもWordPress派の人が圧倒的に多い気がします。

さてさて、最近いじった所をメモ的にまとめて晒しておきます。

【人気の記事】
サイドバー(二列あるうちの左側)に人気の記事を表示するようにしました。これもプラグインを使っています。「Popular Posts」というプラグインです。人気の記事を表示するということも以前から設置しておきたいなと思っていたんですが、やっとですね。ちなみに今現在「MacでDVDをリッピング&焼いてみる」という記事がダントツで人気トップみたいです。

【関連する(かもしれない)記事】
これも人気の記事とともに設置したいと思ってたやつですね。関連する記事については個別記事ページの本文の下に設置しています。これもプラグインですね。「Similar Posts」というやつです。その記事に関連する(かもしれない)記事が5つほど並ぶことになっています。関連記事を割り出すに当たって、指標になる項目に重み付けをすることができます。ちなみにこのブログの設定は、コンテンツ55%、タイトル20%、タグ25%としています。それから、この「Similar Posts」とひとつ前の「Popular posts」を機能させるためには「Post-Plugin Library」というプラグインを一緒に入れておかなければいけないみたいです。

【画像の読み込みをスクロールに合わせて行う】
記事中に画像がたくさん入っているとそれを全部読み込むのに時間が掛かったりしますが、スクロールしてその画像の場所を表示するまで、その画像を読み込まないようにし、表示待ちのストレスを少しでも軽減させる設定しました。スクロールしてその位置までくると、ふわっとしたエフェクト付きで画像を読み込んで表示します。プラグイン「jQuery Lazy Load Plugin」を利用(参考記事:jQuery lazy load pluginの導入と思わぬ不具合への対応! | [NC]News Clipping)。きまぐれ事典ではトップページに最新の8記事を表示させているんですが、全部読み込むのに結構時間が掛かっているんですよね。少しでも高速表示に寄与してくれるといいけど。高速表示に関しては他の方法も合わせて検討した方が良いかもですね。ともかく個人的にはこのふわっと感がお気に入り。

【SNS系のボタン】
記事の下にソーシャル系サービスのボタンを設置しました。これは「WP Social Boomarking Light」というプラグインを利用しています(参考記事:国産対応が充実したソーシャル系サービスボタンのWordPressプラグイン「WP Social Bookmarking Light」導入 – カイ士伝)。たくさんのサービスから選んで設置できるのですが、とりあえずこのブログではTwitterとFacebookとはてなブックマーク。

【OGPに対応】
OGPに対応してみました。OGP(Open Graph Protocol)という仕様がありまして、簡単に言うと、このページはこういう内容ですよ、という情報をHTMLの中に明記しておくためのものです。Facebook、mixi、GREEなどなどSNSを中心に活用されているようですね。記事をSNSに流し込まれた時に各情報をどういう形で扱ってもらうかというのを分かりやすくしておく感じでしょうか。プラグインの「WP-OGP」で簡単にブログに導入できるのでやっておいて損はないかと(ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」:phpspot開発日誌)。

【iPhoneに対応】
これも今になってやっとかという感じですね。これまでiPhoneできまぐれ事典を見るとパソコンから見るのと同じように見れていました。それはそれで良い点もあるのですが、まあ非常に読みづらいという印象はありました。今回導入したのはプラグインの「WPtouch」。とりあえずフリー版で試しています。iPhoneの画面用に設計されたUIなので非常に快適に記事を読み進めることができますね。ちゃんとPC版に戻すスイッチも付いているのもポイントかな。

【アーカイブ(年月リスト)の表示変更】
サイドバー(左側)にあるアーカイブのリストはこれまで「xxxx年x月」という表示の仕方で2006年頃からずらーーーーっと縦長に場所を取っていました。それを言うならタグクラウドもムダに項目多くしちゃっているのでこのへんも検討の余地がありますが、今回メスを入れたのはアーカイブ。プラグインの「monthchunks」を入れてみました参考記事:【WP】月別アーカイブリストを簡潔にする。monthchunks || Ange*Blanc。なんということでしょう!縦にずらずらと並んでいたアーカイブが、スッキリ小さくまとまってしまいました!(←匠の技的な何か)。「年」「月」という字がないので一瞬分かりにくい気もしますが、ま、わかるでしょ。

【ページネーション】
トップページの一番下、カテゴリーやアーカイブのページで記事リストの一番下にページネーション(ページ移動のためのナビゲーション)を設置しました。これもずっと付けたかった機能。今さら感抜群。記事リストに続きがある場合、これまでは「次のページへ」「前のページへ」しかなかったところを、ページ番号で表示。それぞれのページ番号クリックで進んだり戻ったりできます。これもプラグインで実現可能だったりしますが、いろいろあってPHPを埋め込んでます。「Pagenation without plugin 」というやつです(WordPressにプラグイン無しでページネーションを設置する方法 | コリス)。これが一番しっくりきた。

【スムーズにスクロールしてページ上部へ戻るボタン】
記事を画面下の方向へ読み進めて行って、読み終わってから、もう一度上まで戻りたいという時のあのボタン。基本はパッとページの頭まで戻されるものが多いですが、個人的にはスールスルスルとスムーズにスクロールして戻るものが好きなんですよ。これまでもとあるJavaScriptを利用して設置していたんですけど、上記の「jQuery Lazy Load Plugin」とどうやらバッティングする模様。それからいろいろ探しまして、共存可能でスクロールの動きが自分好みのものをやっと見つけて導入することができました。「scrollsmoothly.js」です。

【アイコン画像とかCSSとか見た目をちょっとだけ】
「PAGE TOP」ボタンを作り直して画面右端に設置。あとはRSSアイコンとかリスト用のアイコンとか、じつはちゃっかり差し替え済み。ブログタイトルとRSSアイコンとPAGE TOPボタンはカーソルが乗ったら透明度を変化させるようにもしておきました。CSSだけなのでお手軽。他、見た目に関わる部分、CSSをちょこちょこいじってあります。

とりあえず、今のところそんな感じです。もっとやりたいことはあるので時間のある時に取り組んでいくと思います。よく考えたら今回の改造のほとんどはプラグインによるものですが、こんなに簡単にカスタマイズ出来るのもプラグインの開発者さまのお陰ですね。WordPressはPHPがベースになっていますので、勉強がてらにPHPなんかもいじってみようかな。もっと言うとテーマもイチから自作したいなあとかなんとか思ったりもしてて。まあ時間あればですけどね。

関連する(かもしれない)記事

コメント

コメントをする





CAPTCHA


書いてる人

taca

taca。1978年生まれのB型。ウェブ制作のお仕事をしています。MacユーザーでiPhoneユーザー。写真を撮るのが好き。BBQをこよなく愛しますが、やむを得ない場合はホットプレートでの焼肉でも可。[profile...]

Instagram

リンク

PAGE TOP