VIVABlog

XREAのサーバーにインストールしているWordPressを2.1.2にアップデートしたところ、画像がアップロードできなくなりました。アップロード出来なくなったのはPHP4を使っている仕様のサーバー。

原因は、ファイルの変更にありました。

Continue reading…

ブログエディターは色々出ていますが、自分が使って良さそうなもののみをピックアップしています。馴れるまではちょっと使いにくかったりしますが、複数のブログを書いている人にオススメです。

ブログエディターのおすすめ

Windows Live Writer
WYSIWYG形式でブログのエントリを作成・編集できるMS謹製のブログエディター。Blogger、TypePad、MovableType、WordPress他に多数対応。
現在英語版のみですが、かなり使いやすい。追記ができない。

Zoundry Blog Writer
Windows Live Writer風のブログエディター。
対応ブログにNucleusがあるのが特徴。

xfy Blog Editor
ジャストシステムのブログエディター。MovableType、TypePad、ジャストシステムブログ、FC2ブログ、Seesaa、ココログに対応。（随時追加予定）
本文と追記にそれぞれ記入できる。FC2で過去記事に追記して日付更新したら上手く投稿できていなかったりした。動作が重め。

Continue reading…

WordPressとMovableTypeそれぞれの、SEO的に良くて、訪問者的にも運営者的にも構造が分かり易いパーマリンクの設定です。

MovableTypeのパーマリンク・アーカイブマッピングの設定

• 非ニュースサイトの場合：
  category/sub_category/entry_basename/index.html or .php
• ニュースサイトの場合：
  yyy/mm/entry_basename/index.html or .php

ニュースサイトの場合は記事数が多くなるのと、記事の新鮮度が分かり易くなるので年と月を設定した方がいいかもという理由。

どちらも entry_basename/index.html とすることで、ディレクトリで切る形になります。こうすることで、後々拡張子をhtmlからphpにした場合などでもURLが変更しません。

WordPressのパーマリンク設定

WordPressのデフォルトパーマリンクは、http://hogehoge.com/?p=123 のように動的生成ブログ特有のURLになるのでカスタマイズ必須です。

• 基本形： /%category%/%post_id%/
  %post_id%の部分を%postname%にすると記事タイトルにできますが、日本語タイトルの場合エンコードされるためリネームが必要になります。
• html： /%category%/%post_id%.html
• このサイトの場合： /%category%/kiji%post_id%/
  %post_id%だけだとブログっぽさが出てしまうので、postやkijiを付けた方がそれっぽく見えます。
• その他、パーマリンクのカスタマイズについてを見て個人個人でカスタマイズしてください。

その記事のサイト内での位置を分かり易く表示する「パンくずリスト」をWPで表示する方法です。検索エンジンからのサイト訪問者に分かり易くナビをする事で、ユーザビリティの向上に繋がります。

プラグインBreadcrumb Nav XTの導入

1. Breadcrumb Navigation XTをダウンロード。
2. 解凍したら wp-content/plugins/ にアップロードして、プラグインの管理から有効化。

コード埋め込み

テンプレート（シングルポストなど）に以下のコードをコピペします。

<?php if (class_exists('breadcrumb_navigation_xt')) {
 
    // New breadcrumb object
    $mybreadcrumb = new breadcrumb_navigation_xt;
    // Options for breadcrumb_navigation_xt
    $mybreadcrumb->opt['title_blog'] = 'Home';
    $mybreadcrumb->opt['separator'] = ' &raquo; ';
    $mybreadcrumb->opt['singleblogpost_category_display'] = true;
    // Display the breadcrumb
    $mybreadcrumb->display();
} ?>

• url_blog　：　ブログURLを指定
• title_blog　：　ブログのタイトルを指定
• separator　：　セパレーター>の変更

プラグインエディタでカスタマイズ

FTPで /wp-content/plugins/breadcrumb-navigation-xt.php のパーミッションを707等にして、プラグインエディタで表示のカスタマイズをします。

Blog article:という表示が邪魔だったのでソートして削除。

設定の変更はいろいろ出来ますが、パンくずリストとして表示できればOKなのでそこまで弄らなくてもいいかな。

WPのtitleはデフォの状態ではSEO向きではないので、titleを改変するwp-title-suffixというプラグインがありますが、このwp-title-suffixはパンくずリストプラグインのBreadcrumb Navigation XTの動作に影響が出てしまいます。

そこで、プラグインを使わずにSEO向きにする事でそれを回避する方法。

プラグインを使わずにtiteのSEOカスタマイズ方法

テーマエディタでヘッダーテンプレートのtitle部分を以下のものに変更します。
ブログのタイトル部分には自分のサイト名を入れてください。

<title><?php wp_title('ブログのタイトル なくてもいい'); ?><?php if(wp_title('ブログのタイトル', false)) { ?> | <?php } ?><?php bloginfo('name'); ?></title>

< >をそのまま入力するとコードとして認識されるので、 < を &lt; に、> を &gt; にそれぞれ書き換えなければいけません。
基本的にhtmlコードなどをブログなどに記載する場合は、<pre>タグを使うようになっています。

<pre>タグタグを使う場合

<pre><code>
ソースコード
</code><pre>

という風に、<pre>タグで<code>タグを囲って使います。
ただ、このままだと折り返さないコードの場合は、横幅がスゴイことになってしまうのでcssでちゃんと折り返されるようにします。

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

WordPressプラグインを使用してコードを表示する場合

• PHP Hilight Stringインストール方法 | Download
• 使い方は簡単で、コードを専用のタグで囲うだけ。

同梱されているcssはテンプレートcssに入れればOK。
このcssを編集すればフォントの大きさやボーターカラーの変更ができます。

/*
ハイライトする色の指定
*/
.hl-surround{
    -moz-border-radius: 5px;
    background-color: #F9FBFC;
    border: 1px solid #C3CED9;
    padding: 8px;
    margin-bottom: 5px;
    width: 500px;
    overflow: auto;
    text-align: left;
}
 
.hl-surround, .hl-surround pre, .hl-surround span{
    font: normal 10pt 'Courier New', monospace;
}
 
.hl-default{
    color: Black;
}
.hl-code{
    color: Gray;
}
.hl-brackets{
    color: Olive;
}
.hl-comment{
    color: #ffa500;
}
.hl-quotes{
    color: #8b0000;
}
.hl-string{
    color: Red;
}
.hl-identifier{
    color: Blue;
}
.hl-builtin{
    color: Teal;
}
.hl-reserved{
    color: Green;
}
.hl-inlinedoc{
    color: Blue;
}
.hl-var{
    color: #00008b;
}
.hl-url{
    color: Blue;
}
.hl-special{
    color: Navy;
}
.hl-number{
    color: Maroon;
}
.hl-inlinetags{
    color: Blue;
}
.hl-main{
    background-color: transparent;
}
 
.hl-main pre{
    margin: 0; padding: 0;
}

MovableType用プラグインを使用する場合

エントリー投稿画面に追加される「&」ボタンを押すだけで、選択した文字列を実体参照化してくれる便利なプラグイン。

[MovableType用EntityRefButtonプラグイン v0.0.5 ]

WPの出力したfeedをFeedBurnerに登録した場合、FeedBurnerが文字化けしてしまう事がありました。

文字コードはUTF-8なのですが・・・
原因がよくわからないのでAtomを登録してみたら治りました。

WPを個人日記系ブログとして使用する場合に使用すると効果的なスマイルアイコンを、簡単に導入できるWordPressプラグインです。

[ More Smilies Plugin ]

インストールして有効化すると、オプションで使用するアイコンパックを設定できます。

投稿画面のメニューにSmilesメニューが出ているのでクリックすると、ポップアップでアイコン画面がでてきます。 8O:lol:

コメント欄のフォームにスマイルアイコンを使うには、テンプレートスキンの編集でコメントのテンプレートに以下を追加します。

<?php do_action('comment_toolbar', 'comment'); >

WordPressの画像アップロード機能を拡張するプラグイン「IImage browser」は、XREAではそのままで動作しません。

cgiとして動作させる事で使用可能になります。

IImage browserについては下記を参考に。
[ WordPress Japan - IImage browser 日本語版 ]

IImage browserをcgiとして動作させる方法

.htaccessファイルを作って下記のように入力。

<files iimage-browser.php>
AddHandler application/x-httpd-phpcgi .php
</files>

インストールディレクトリ/wp-admin にこれをアップロードして完了。

なお、IImage browserを使うにはビジュアルリッチエディタを停止しておかなければいけません。下記のようにして停止します。

• オプション > 投稿設定の「ビジュアルリッチエディタを使用する」のチェックを外す。
• ユーザーの「記事投稿時にビジュアルリッチエディタを使用する」のチェックを外す。

SEOに必要となるキーワードmetaタグ・descriptionタグを、それぞれ記事投稿から追加できるプラグインがあります。

keywords系のプラグインはかなりの数があり、その中から色々試して、自分の納得のいくものが見つかりました。制作者の方には感謝。

【納得のいく条件】

• keywordsとdescriptionを投稿別に記入できる。
• descriptionを入力しない場合は、自動的に記事から入力される。
• 一つのプラグインの導入だけで実現できる。（james系は面倒）
• indexページやアーカイブページのdescriptionを入力できる。

[ Add-Meta-Tags WordPress Plugin ]

インストールして有効化すると、オプション > Meta tagsタブから設定が可能です。
Meta Tags on the Front Page にはトップページのキーワードと概要が指定できます。

個別記事投稿の指定方法は、カスタムフィールドの部分にkeywordsとdescriptionを入力します。（keywordsは「キーワード, キーワード」という風にカンマで区切る。）

カスタムフィールドを追加するには、フォームにkeywordsと入力して、値の部分にキーワードを入力してからカスタムフィールドを追加ボタン。