カテゴリー : WordPress

プログラムソースを綺麗に表示するには

(X)HTMLテキストでホームページを作る際、ソースコードなどはフォント幅やスペース文字を固定幅で出力したいため、<pre>タグや<code>タグを利用して記述し、CSS で border で囲むなど飾り付けをしていた。数年前から、ブログを利用する方たちは「Syntax Highlighter」を利用して、大変見易いページを表示するようになった。

自分も WordPress を利用することにしたので、さっそく調べたところ、いくつかある中から「Google Syntax Highlighter for WordPress」プラグインを使わせていただくとにした。

利用する際、修飾したいソースプログラムを「<pre name=”code” class=”javascript”>」タグで囲めばよい。一つ問題なのは、ビジュアルエディタを利用すると使用タグの正規化のため、「name」属性が削除されてしまうことだ。今のところ、HTMLエディタで保存するようにして回避している。

これは、TinyMCE の init 処理で、name 属性を削除しないように指定すればいいのだが、どこでどのようにすればいいのか調べたところ、「\wp-admin\includes\post.php」の「wp_tiny_mce()」関数で、1330行目のコメントに「tiny_mce_before_init」を利用すればできることが記述されている。まだあまりWordPressに慣れ親しんでいないので、この先は後日の楽しみとすることにした。WordPressバージョンは2.8.4。解決方法を探している人がいたら、どうも m(_ _)m。

編集で利用するビジュアルエディタ(TinyMCE)のフォントを変更する

ビジュアルエディタ内の表示フォントが明朝のためか、半角英数字を混在させるとどうも気持ち悪い。そこでフォントを変えようかと、どのCSSファイルにパッチを当てればいいか調べたところ、どうやら「\wp-includes\js\tinymce\themes\advanced\skins\wp_theme\content.css」ファイルの「body.mceContentBody」の font 指定を変更すればいいことが分かった。

暫くして、別のサイトに WordPress をインストールして同様の変更をしようとしたところ、すっかり忘れていたため時間を食ってしまった。こういうことは、こまめに記事にしておかないといけないな、と改めて思った(;´д`)。

body.mceContentBody {
	font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;

body.mceContentBody {
	font: 12px/19px Arial, Helvetica, sans-serif;

へ変更した。WordPressのバージョンは 2.8.4

WordPress JavaScriptプログラムを記事に挿入、実行するには

JavaScript を利用したページ作りは、WordPress ではどのように実現するか? について、探し方が悪かったのか良い方法が見つけられなかった。そこで自分なりに考え、以下の方法で解決することにした。

実現方法の概要

  1. JavaScript のプログラムは、投稿記事やページに直接記述しても実行できないので、カスタムフィールドに登録する。
  2. 登録したプログラムが(X)HTMLのhead部に読み込まれるように、テンプレートを変更する。
  3. jQueryのようなライブラリを読み込んで利用できるように、1,2と同じ方法を行なう。

カスタムフィールドの登録

post(実際はpostmetaテーブル)データにカスタムフィールドが登録できる、と言う機能には正直感心した。これのおかげで、非常に拡張性 に富んだ作業が行なえると感じたからだ。今回カスタムフィールドに登録するデータは、ライブラリ読み込みの例としてjQueryを読み込むためのデータ と、プログラムを読み込む例としてjQueryを利用したプログラムである。

それぞれのキーを、ライブラリは「js」、プログラムは「script」とする。

ところで外部ライブラリの読み込みは、テンプレートに直接書けば可能だ。が、利用しない表示ページにも読み込まれてしまうので、あまり嬉しくない。 ここはライブラリを利用する投稿またはページを表示するときだけ、必要なライブラリを読み込むようにしたいので、カスタムフィールドを利用することにし た。

ライブラリを読み込むためのカスタムフィールドの値

ライブラリの読み込みは、WordPress で用意されている「wp_enqueu_script()」関数を利用するので、その関数に必要なパラメータを、カンマ区切りで登録する。パラメータは、 ハンドル名、ソースのURL、依存するライブラリのハンドル名、バージョンとなる。

jQueryの読み込みを例に取ると

wp_enqueue_script('jquery','/js/jquery/jquery-1.3.2.min',false,'1.3.2');

とすれば良い。WordPress 側は、同じライブラリが登録されても2重に読込みしないようにしてくれる。また、テンプレート上の「wp_head()」を記述したところに、ライブラリを読み込むHTMLを挿入してくれる。

カスタムフィールドの値は、「jquery,/js/jquery/jquery-1.3.2.min,0,1.3.2」とする。

余談だが、jQueryはデフォルトでWordPressのシステムに登録されているため、上のように記述しても、WordPress の方からロードする。また、「jQuery.noConflict();」も追加されているので、そのままでは「$()」を利用できない。

テンプレートへの追加・編集

ヘッダ部のテンプレートは、デフォルトで「header.php」ファイルである。「</head>」タグの上を見ると、 「<?php wp_head(); ?>」があるので、この上にライブラリを読み込むPHPのソース、この下にプログラムを読み込むためのPHPのソースを、それぞれ追加する。

<?php
  if (is_singular()) {
    $src = get_post_meta($post->ID, 'js');
    if (!empty($src)) {
      $opt = explode(',', $src[0]);
      wp_enqueue_script($opt[0],$opt[1],$opt[2]==0?false:true,$opt[3]);
    }
  }
?>

投稿記事またはページを表示するときだけ、そのページのライブラリ情報のカスタムフィールドを取得し、その情報を元に WordPress に読込みの登録をする。

次に、プログラムの読込みである。「<?php wp_head(); ?>」と「</head>」の行間に以下のPHPソースを挿入する。

<?php
  if (is_singular()) {
    $script = get_post_meta($post->ID, 'script');
    if (!empty($script)) { ?>
<script type="text/javascript">
//<![CDATA[
<?php echo $script[0]; ?>
//]]>
<?php }} ?>

上と同様、投稿記事またはページを表示するときだけ、そのページに登録されたプログラムのカスタムフィールドを取得し、(X)HTMLにタグで囲んだプログラムを挿入するようにする。

実験したプログラムは、次のものを試してみた(scriptキーに登録した値)。

jQuery(document).ready(function() {
  $ = jQuery;
  $("p").click(function() {
    alert("キタ━━━━(゚∀゚)━━━━ !!!!!");
  });
});

動作が確認できたときは、少し嬉しかった。自分で作ったブログシステムを捨てて WordPress へ置き換えるのは寂しいが、WordPress の持つCMSとしての未来にはワクワクするものを感じる。ので、相殺と言うことで(^_^;)。

WordPress のバージョンは、2.8.4。

Firefoxを利用してフォームのtextareaにタブを挿入したい場合、「Tab in Textarea(tabinta)」アドオンを利用すると良い。フォーム表示画面でのタブキーは、項目移動に使われるので、「shift+tab」でタ ブが挿入されるように設定して使っており、便利いいです、hai。

WordPress 画像のアップロードについての悩み

WordPress を自在に利用できるように、技術的に以下3つの理解を進めて行くよう考えた。

  • テンプレート機能
  • JavaScriptの組み込み、利用
  • プラグインの作成

進めて見ると、なかなか幅は広いし奥行きもある。時間が掛る予感。

さて、WordPress の画像アップロードだが、アップロード先は管理画面の[設定]-[その他の設定]で指定できる。その指定先に年ディレクトリと月ディレクトリを作成し、 アップロードした日付に合わせて転送画像ファイルと、管理画面用に150×150に縮小した画像を該当する月ディレクトリに保存する(Firefox 3.0.13ではFlashアップローダが使えなかったので、ブラウザアップローダを利用した)。

画像管理は管理画面の[メディア]で、[ライブラリ]の表示を見ると保存したユーザー、日付、どの記事でリンクされたかの情報がある。ファイル以外 の情報が載っているので、データベースのテーブルの中身を覗いて見た。「wp_posts」と「wp_postmeta」テーブルに、画像のアップロード に関するデータが登録されていた。

管理画面から画像ファイルを削除してみると、DBに登録されたデータ、および画像ファイルは削除された。

WordPress の画像管理機能を使わず、FTP で画像をアップロードして利用するようにするか、それとも WordPress の機能をそのまま利用するか、悩ましいところだ。

と言うのも、投稿のリビジョン保存やオートセーブで、こちらが考えているよりもデータベースが膨らむようで、画像のアップロードにしても同様で、どうも気持ちが悪い。画像が多いとき、FTP のように一括アップロードできないのもどうしたものか。

ところで、投稿のリビジョン保存を止めたりオートセーブを停止させるプラグイン、また保存されたリビジョンデータを削除するプラグインの紹介が、「WordPressのリビジョンと自動保存を無効にする」にあるので参考まで。

WordPress 投稿の編集にTinyMCEをインストールして利用する

WordPress で TinyMCE の利用を思い立ち、検索すると tinymce-advanced というプラグインが一番最初に見つかった。現在 TinyMCE 本家のバージョンが3.2.5で、プラグインは3.2.4なので極めて新しい。履歴を見ると、かなり以前から継続してアップデートされている。そして、本 プラグインを日本語化されている方もおられたので安心感もあり、インストールを試してみた。

インストールは極めて簡単、手順は以下の通り。

  • ダウンロードして解凍(TinyMCE Advancedのページ)
  • wp-content/pluginsへtinymce-advancedをアップロード
  • ダッシュボードの[プラグイン]から TinyMCE Advanced を「使用する」にする

後は、プリファレンスの Manage を TinyMCE Advanced にしてキャッシュをクリア、とインストールの説明にあったが、特に設定せず動作するようになった。実はインストール前のメニューが

0811normal

で、インストール後が

0811tinymce1

だったため、変化に気が付かず、利用できないかと勘違いしていた。また、ボタンメニューも2段になるかと思ったのだが1段のままだ。しばらくして、右端のボタンが「アドバンストツールバーの表示/非表示」を切り替えるモノだと分かった。

0811tinymce2

プラグインをインストールする前と比較すると機能が増えている。また、ダッシュボードの[設定]でTinyMCE Advanced を選択して、メニュー構成の追加、変更が可能となる。

プラグインの設定画面の日本語化は、ラブログ+*さんのページか らI18n対応ファイルをダウンロードし、プラグインのプログラム(plugins/tinymce-advanced/tadv_admin.php) に読み込ませる命令を追加すればよい。日本語メッセージのファイルは、「tinymce-advanced-ja.mo」でインストール先は tadv_admin.php ファイルと同じディレクトリとなる。

ダッシュボード[プラグイン]-[新規追加]を選択すると、WordPress のプラグインを選択、インストールできるようになっており、また、国内のプラグイン開発プロジェクトへのリンクもある。WordPress 初心者の自分は、まだほんの一部を垣間見ているだけなのだと強く思った。