【WordPress】 プラグイン Hello Dolly を改造してリサイクル

   2014/07/29   icon-clock-o読了時間:約12分28秒

WordPressを初めてインストールした時、パックになっている様々なファイルの中に
『 Hello Dolly 』というプラグインが入っています。

プラグインの解説を見てみるとこのように書かれています。

これはただのプラグインではありません。Louis Armstrong によって歌われた最も有名な二つの単語、Hello, Dolly に要約された同一世代のすべての人々の希望と情熱を象徴するものです。このプラグインを有効にすると、すべての管理画面の右上に Hello, Dolly からの歌詞がランダムに表示されます。

・・・??? U・x・U うん?
なんのことやら分からず頭にハテナマークを浮かべた方も多いはず。

ちなみに Hello Dolly を歌ったルイ・アームストロングは
皆さんご存知の20世紀を代表する素晴らしいジャズミュージシャンです。
ルイの名前に覚えが無い方でも、名曲『 What a Wonderful World(この素晴らしき世界) 』などを
どこかで耳にしたことがあるのではないでしょうか。

上の説明のとおり、プラグイン『 Hello Dolly 』がやってくれるのは
『 管理画面の右上に Hello, Dolly の歌詞から一文をランダムに選んで表示する 』。それだけです。
管理画面を見るのは自分か、共同管理者がいればその人くらいでしょうから
ルイはいいんだけどなんでわざわざ歌詞を表示させるだけのプラグインがデフォルトで
入ってるのかなあ、と思いつつ、別に使わないし消しちゃおうか、と考える方も多いでしょう。

でもこの『 Hello Dolly 』、ファイルを見てみるとシンプルな機能なだけに記述もシンプルで
初めてPHPという言語に触れた私でも何となく理解することができました。
そしてなんとなく理解できればなんとなく改造も出来る。
ということで、あちらこちらのサイトさんを参考にさせていただきつつ、
『 Hello Dolly 』を “ 管理画面に歌詞を表示する ” プラグインではなく
“ ブログのサイドバーに一言コメントを表示する ” プラグインにしてみました。
それがこのブログの右側にある小ネタのコーナー。
なんかもっと他に有意義な使い道があるような気がしなくもないのですがひとまずこれで。

これを応用すればどこでもお好みの場所にお好みの文言を表示させる機能として配置することができます。
というわけで『 Hello Dolly 』にちょっぴり手を加える手順をご紹介したいと思います。

ご注意

WordPressの各ファイルを編集しますので、もしも間違って大切なファイルや記述を消してしまった時
すぐに元に戻せるように予めバックアップを取って置いてください。
また、プラグインによって日頃から自動バックアップを取っている方は
直近のバックアップが正常に完了しているか、そのファイルからデータを戻せるかを
確認してから以下のプラグイン編集に取り掛かってくださいね。

まずは元のファイルを見てみる

『 Hello Dolly 』の最初の状態がこちら。

/* ~ */ で囲われた1~13行は、プラグインのバージョン、
プラグインの作者さん、作者さんのホームページなどが記載されています。
見ていただくのはその後から。

ちょっと内容を見てみる

【 /* 】や【 // 】で始まるコメント部分を日本語にしつつ説明を追記してみます。

なんとなく何が記述されているのか伝わりましたでしょうか。
こうして命令を記述して歌詞を管理画面に表示させているので、
命令を書き換えれば表示させる内容や場所を変更することができます。

いざHello Dolly を改造

それでは実際に記述を書き換えてみましょう。
※下記ソースコードについては、しばたま様のブログ記事
 『 Hello Dollyをいじってみた 』を参考にさせていただきました。
 ありがとうございます!(ノ´∀`)ノ

上記のようにPHPファイルを書き換えて保存したら、次に表示させたい場所にショートコードを記述します。
上記の一番最後で決めたショートコード ”dolly” のことですね。

改行コードについて補足

上記コード内の23行目、
 $lyrics = explode( “\n”, $lyrics ); 
この記述の中で使われている改行コード『 \n 』。
これは 『 半角の¥ 』と『 小文字のn 』を組み合わせた改行文字と呼ばれるものです。
この『 半角の¥ 』、文字コードの関係で『 \(バックスラッシュ) 』に勝手に変換されたり、
逆に『 \ 』が『 半角の¥ 』になって表示されたりもします。
自分が入力した文字と違うものが出たらちょっとびっくりしますよね。

基本的にはお使いのOSがWindowsで日本語環境になっていれば『 半角の¥ 』、
OSがMac OSなら『 \ 』が表示される他、
ブラウザ上の文字コードの設定によっては、ページによって¥と \ が入れ替わったりします。
このブログの文字コードでは半角¥が出ないと思うので、上のコードも『 \ 』になって見えているはずです。

なんでこんなややこしいことになったかというと、
コンピュータで扱える文字が少なかった古の時代(といっても30年くらい前)にまで話は遡ります。
コンピュータが開発されて間もない頃には、1バイトで表現できる256文字しか文字コードに使えませんでした。
しかも開発環境が英語圏だったので基本的には英語を基準にしています。
そんな限られた文字しか存在しない中でプログラミングを行う際に
『 \ 』と『 n 』が改行文字として割り振られました。

そしてコンピュータが日本にやってきた時、どうにか日本語のカナ入力を行うために
「 日本であんまり使わなそうな文字コードに日本専用文字を割り振っちゃえ 」 という流れで
『 \ 』に『 ¥ 』を割り振ったのです。
割り振った人はあんまりプログラミングに興味が無かったのか、
それとも後々こんな面倒になるとは思わなかったのかは分かりませんが、
こうして特に日本では同じ文字コードに『 \ 』と『 ¥ 』、2つの文字が当てられた状態になりました。

Windows上で動作するプログラムを記述するのであれば
改行は『 半角の¥ 』と『 小文字のn 』で構わないのですが
(必要があれば自動で¥が \ に変換されます)
Mac OS上で動作するものを作る場合は『 \ 』と『 n 』で最初から記述する必要があるので要注意です。

¥はそのまま右上の¥を押せば表示されます。
\を出すためにはCapsLockで英数入力に切り替えた後で右下の\を押す必要があります。
日本語入力のまま\を押すと¥が出てきます。
改行文字の説明-バックスラッシュ

ショートコードを記述

ウィジェットを開く

今回文章を表示させたいのはサイドバー(画面右のメニュー)部分です。
サイドバーに表示されるもの=ウィジェットとして表示させるため
管理画面の【 外観 】メニューから【 ウィジェット 】を開いてください。
外観からウィジェットを開く

※使用しているテーマによってメニュー表示や名称が異なる可能性があります。
 ご自身の使用環境に合わせて表示させたい箇所を探してみてください。
※サイドバーだけではなく、投稿ページや固定ページ、ヘッダーやフッターなど様々な場所に応用できます。

ショートコードを記述

ショートコードは下図のように [ ] で囲んで記述します。
ウィジェットにショートコードを記述
普通に文章が出てくるだけでは味気ないので、このブログでは
classで装飾を加えたり、その下に「ページ更新~」と追記したりしています。

ウィジェットの中でもショートコードを使えるようにする

ウィジェットにショートコードを書いただけではまだ何も起きません。
PHPファイルの中身は実行されることなく、dolly という文字が表示されるのみ。
これはWordPressの通常仕様としてウィジェットではショートコードが使えないからです。
なぜかは知らないのですがとりあえず使えないことになっています。でも使いたい。
というわけで『 ウィジェットの中でもショートコードを使う 』機能を追加します。

※サイドバーのウィジェット以外でショートコードを使う場合は
 特にこの手順は必要ありませんので飛ばしてください。

functions.phpを編集する

管理画面の【 外観 】メニューから【 テーマ編集 】を選択、
更にずらっと並んでいるファイル一覧から functions.php ファイルを選択してください。

最初のコメント部分には「ファンクションファイルには大事なものが
いっぱい書いてあるから下手に編集すると危ないよ」と書いてあったり
私は『 mantra 』というテーマをお借りしているので「mantraのパッケージだよー」と書いてあります。
その後はどのファイルを読み込んでブログを構成するかの記述があるので
間違って削除したりしないようにご注意ください。

追加する記述は下から2行目の add_filter(‘widget_text’, ‘do_shortcode’); の一文のみ。
これでウィジェットエリアでもショートコードを使用できるようになりました。

実際のブログのサイドバーを確認して、表示させたかった文章がきちんと出ていれば成功です。
もし相変わらず『 dolly 』しか出ていなかったり、何にも表示されていないような場合には
どこかで記述が違っていたり、違うファイルを編集していたりするのかもしれません。
今まで編集した箇所をもう一度確認してみてください。

更新時の注意

テーマの更新が行われるとfunctions.phpファイルの内容も更新されて書き換えられ、
このショートコード用の記述が消えてしまうことがあります。
ある日ショートコードがちゃんと動いていないことに気づいたら、
まずはfunctions.phpファイルの内容を確認してみてください。

class指定で装飾

サイドバーに黒文字で文章が出てくるだけじゃどうにも見づらいしつまらない。
ということでちょっと装飾を加えたい場合はCSSファイルにclassを追加してショートコードに対して適用させます。

これ ↓ が装飾した状態。四角い枠で囲み、文字色や背景色を変えています。
(追記;現在はテーマをMantraからGush2に変更したので装飾も変えています)
小ネタ
管理画面の【 外観 】メニューから【 テーマ編集 】を選択、
更にずらっと並んでいるファイル一覧からスタイルシート (style.css)を選択してください。

ファイルの内容を見ていただくと、body、h1、content、といった
ページの配置や装飾に関する指定が並んでいるので、その中に今回の装飾指定を書き込みます。
追記する場所はh1やh2などの見出し指定の後らへんで適当に。
classの名前も自分が分かりやすいものであれば何でも構いません。

余白や文字色などをお好みで記述したら、左下の【 ファイルを更新 】で更新保存してください。
CSS編集
class指定をショートコードと合わせてウィジェットに記述すれば装飾が適用されます。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント一覧

  1. […] 参考⇒【WordPress】 プラグイン Hello Dolly を改造してリサイクル […]