eラーニングをすべての人に！blog.eラーニング.co.jp

きばらじのファンページができました。新しい試みで、FBMLのテンプレートを使用し、様々なことができるようになりましたのでご紹介致します。

1.タブの階層構造化

▲タブの中に複数のタブを作成

StaticFBMLで作成したオリジナルタブの中に、さらに複数のタブを階層化しています。第２のメニューになるので、使い方によっては、縦長になりがちなオリジナルタブ内もすっきり整理できます。

2.お問い合わせフォーム

▲お問い合わせフォーム

ファンページかWebサイトへリンクしてお問い合わせを取る、という流れも悪くはありませんが、ファンページにもお問い合わせフォームがあった方がいい！と場合もあるでしょう。きばらじに問い合わせがあればどしどしこちらのフォームからご連絡ください。

３．スライド写真

▲複数の写真を1箇所でスライド表示できるようになりました。

オリジナルタブに写真を何枚も貼ると、タブ内が縦長になりがちですが、スライド写真を導入することでスッキリします。キャプション（写真下の簡単な説明文）もつけることができます。

４．シェアボタン

▲シェアボタン

」

シェアボタンをつけることで、スグにシェアしてもらえる可能性が高まります。ここだ！というポイントに効果的に置きたいですね。

今回は、「スタティックFBML実用サンプル集」というファンページで無料配布されているテンプレートを利用させて頂きました。

最近では、こういう無料配布サイトがではじめましたが、私の見るところ、現状ではこちらが一番充実していて、この他、ファンページでいいね！をクリックしないと見ることができない仕組みや、コメント欄のタグなども公開されているようです。

きばらじのファンページ、どうぞよろしくお願い致します。

WordPressは、わかりやすいソースコードで記述されていて、プログラマでなくてもある程度のカスタマイズを実現できます。今回は、非プログラマが犯しがちな2つの落とし穴について解説します。

1. 文字コードはUTF-8を使うこと。

WordPressのソースコードはUTF-8です。Shift-JISでも、euc-jpでもありません。UTF-8です。エンコードを間違えると、文字化けするだけでなく、重大なエラーが発生し、最悪の場合はWordpressの管理画面が利用できなくなってしまう可能性さえあります。ソースコードは必ずUTF-8で保存してください。

utf-8以外で保存すると文字化け発生！

2. HTMLコメントでコメントアウトしない。

テンプレートから要素を削りたいことってありますよね。たとえば、投稿日時や、投稿者情報、コメント欄など。でも、要素を削るために、HTMLのコメントアウトを使うのは危険です。

<!–<?php the_title();?>–>

上記のソースコード、タイトルを表示させないことを意図していますが、どこが危険なのか分かりますか？HTMLのソースコードを見られたらタイトルがばれるというのも問題かもしれませんが、本当の問題は、the_title()の中でHTMLのコメントアウトが出力され得るということです。HTMLコメントは、入れ子構造に対応していません。そのため、the_title()がHTMLコメントを出力すると、以下のようになり、表示が崩れてしまいます。

<!– <!– title –> タイトル –>

こうなってしまうことを防ぐためには、PHPのコメントアウト、もしくは、if文を使った実行制御で対応しましょう。

単行PHPであれば//で十分。

<?php // the_title(); ?>

複数行のコメントアウトはif文を使うと便利。

<?php if(0){?>
この部分はHTMLに出力されません。
<?php } ?>

もちろん、PHPの複数行コメントアウトである/* */も使えますが、/**/も入れ子構造に対応していません。なので、if(0){}で囲ってしまうのが一番確実です。

この記事は、Wordpressのテンプレート編集時の注意事項というタイトルで書きましたが、これらの注意点は、PHPなどのWebアプリケーションのソースコード（特にview部分）を書き換える場合には汎用的に使える知識です。