Tag Archives: WordPress

WordPressに特殊文字変換機能をつける

記事を投稿するとき「<」などと入力するときは「&lt;」と書く必要があります。
特殊文字についてはこちら
これを普通に入力した後変換してくれる下のようなボタンを投稿ページにつけたいと思います。
WordPressのescapeボタン

編集するのは「wp-includes/js/quicktags.js」です。
まず、「function edToolbar() {」の行の上に以下のように追加します。


function edEscapeString(strOld)
{
    var strNew = "";

    for(var i = 0; i < strOld.length; i++){
        var c = strOld.charAt(i);

        switch(c){
        case '<':
            c = "&lt;";
            break;
        case '>':
            c = "&gt;";
            break;
        case '&':
            c = "&amp;";
            break;
        case '    ':
            c = "    ";
            break;
        }
        strNew += c;
    }
    return strNew;
}
function edEscapeChars(myField) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        strTmp = sel.text;
        strTmp = edEscapeString(strTmp);
        sel.text = strTmp;
        myField.focus();
    }
    //MOZILLA/NETSCAPE support
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        var strTmp = myField.value.substring(startPos, endPos);
        var strPos = myField.value.substring(endPos, myField.value.length);
        var strPre = myField.value.substring(0, startPos);
        strTmp = edEscapeString(strTmp);
        myField.value = strPre + strTmp + strPos;
        myField.focus();
        myField.selectionStart = startPos + strTmp.length;
        myField.selectionEnd = startPos + strTmp.length;
    }
}

次に「function edToolbar() {」の中の「document.write(‘<input type=”button” id=”ed_spell” class=”ed_button” onclick=”edSpell(edCanvas);” title=”Dictionary lookup” value=”lookup” />’);」の上に以下の行を追加します。


document.write('<input type="button" id="ed_escape" class="ed_button" onclick="edEscapeChars(edCanvas);" title="escape characters" value="escape" />');

これで「escape」というボタンができるので変換したい部分を選択しこのボタンをクリックすると変換してくれます。

今回参考にさせていただいたサイト
エディターのボタンを増やす -2

WordPress MEをインストールしよう

こりゃまた前後しますが、
ApacheやPHP MySQLなどの環境が整ったのでホームページを作ろうと思います。
しかし、一から作るのは管理などが大変なので、「WordPress ME」というブログソフトウエアを使用したいとおもいます。
これを使えばたくさんのテンプレートから見た目を選んだり、各種拡張機能がたくさんあるので手軽にきれいなサイトを作成することができます。
これを日本語にローカライズしたのが「WordPress ME(Multilingual Edition)」です。
まずはSQLに「WordPress用のユーザー」「WordPress用のデータベース」を「phpMyAdmin」を使って作成します。「phpMyAdmin」をつかって「root」にログインしておいてください。

まずはユーザーを作成します。
トップページの「特権」をクリックします。
pma-tokken

次に「ユーザを追加する」をクリック
pma-AddUser

ログイン情報を入力
pma-LoginInfo
ユーザー名に「wordpress」(自由に変更してください)
ホストをローカル/localhost
パスワードも決めて入力してください。
グローバル特権は「データ」と「構造」に関する権限にすべてチェックしてください。
pma-GlobalTokken
「実行する」ボタンをクリックしユーザー登録を完了します。

次にトップページから新しくデータベースを作成します。
pma-AddWordPress
データベース名を決めて「utf8_unicode_ci」を選択し作成します。

次に「WordPress」をダウンロードし、ドキュメントルートに配置します。
WordPress JapanのダウンロードからWordPress のversion2.0系列あるいは2.3系列の最新版のmultilingual-editionをダウンロードします。
今回は「wordpress-2.0.11-multilingual-edition」をダウンロードし、解凍しフォルダーを好きな名前に変更しておきます。今回は「wordpress」というフォルダ名にしドキュメントルート(以下の例では/home/www/chibiegg/)にフォルダーごとコピーしました。
そしてこのフォルダー以下のパーミッションを777に変更します。


$ su
# chmod -R 777 /home/www/chibiegg/wordpress/

次にブラウザからインストール作業を行うため
「http://サーバーのIPアドレス/さっき決めたフォルダ名/」を開きます。先ほどのフォルダ名「wordpress」にすると「http://サーバーのIPアドレス/wordpress/」を開くことになります。以下のページが出ます。
WordPress ME セットアップトップ
「ウィザード」をクリック
WordPress ME セットアップ2
「こちらをクリック」をクリック

設定画面が出るので
データベース名を先ほど作った「wordpress」
ユーザー名も先ほど作った「wordpress」
パスワードはそのときのSQLのパスワード
ホスト名とテーブル接頭語はそのまま
ブログの文字エンコードは「UTF-8」
にして「submit」ボタンをクリックします。

「インストール」をクリック
次に「First Step »」をクリック。文字化けしている場合はブラウザのエンコードを「UTF-8」にする。
First Stepでブログ名とメールアドレスの設定
Second Stepに進むとユーザー名とパスワードが発行されるのでメモしておきます。
ログインして「マイアカウント」メニューからパスワードを好きなものに変更しておきましょう。
最後にパーミッションを755にします。


$ su
# chmod -R 755 /home/www/chibiegg/wordpress/

これでWordPressのインストールは終了です。

WordPressでサムネイル作成の有効化とサイズ変更

WordPressには標準で画像をアップデートするときにサムネイルを作成してくれますがなぜか「GD」という画像編集機能がインストールされていなかったのでインストールします。


$ su
# apt-get install php4-gd
# /etc/init.d/apache2 restart

これで投稿画面にあるアップロードから画像をアップロードするとサムネイルが作成されるようになりました。

次にサムネイルのサイズを変更しようともいます。
標準では128×96のうち小さい方にあわせられるようになっているが、ちょっと小さいので400×300にしようとおもいます。これはソースの関係上4:3がいいです。
編集するファイルは「WordPressフォルダ/wp_admin/inline-uploading.php」です。
90行目ぐらいに以下のような記述があります。


	if ( $imagedata['width'] * $imagedata['height'] < 3 * 1024 * 1024 ) {
		if ( $imagedata['width'] > 128 && $imagedata['width'] >= $imagedata['height'] * 4 / 3 )
			$thumb = wp_create_thumbnail($file, 128);
		elseif ( $imagedata['height'] > 96 )
			$thumb = wp_create_thumbnail($file, 96);

		if ( @file_exists($thumb) ) {
			$newdata = $imagedata;
			$newdata['thumb'] = basename($thumb);
			update_post_meta($id, '_wp_attachment_metadata', $newdata, $imagedata);
		} else {
			$error = $thumb;
		}
	}

この中の「128」と「96」をすべて以下のように「400」と「300」に変更しましょう。


	if ( $imagedata['width'] * $imagedata['height'] < 3 * 1024 * 1024 ) {
		if ( $imagedata['width'] > 400 && $imagedata['width'] >= $imagedata['height'] * 4 / 3 )
			$thumb = wp_create_thumbnail($file, 400);
		elseif ( $imagedata['height'] > 300 )
			$thumb = wp_create_thumbnail($file, 300);

		if ( @file_exists($thumb) ) {
			$newdata = $imagedata;
			$newdata['thumb'] = basename($thumb);
			update_post_meta($id, '_wp_attachment_metadata', $newdata, $imagedata);
		} else {
			$error = $thumb;
		}
	}

これでサムネイルのサイズも変更できます。