CssやJavaScriptをヘッダに追加するプラグイン(WordPress)：とりさんのソフト屋さん

ここからダウンロードして、wp-content/pluginsに入れるだけ。使い方も簡単で、投稿ページでカスタムフィールドに記述すれば、ヘッダにCSSやJavascriptが追加されます。

使い勝手も良いので、これからはこのサイトで活躍しそうなプラグインです。

としていました。この方法だとHTML-Lintで、「<div>~</div>の中に要素がありません」と怒られてしまう。表示上問題ないので今までほかっておいたんですが、そろそろ気持ち悪くなってきたのでちょっと考えてみました。要は要素が何か入っていればいいと。

以下のようにblockTopの中にblockBtmを入れ子にし、blockMidは削除。

CSSはこんな感じ。

◆サンプル

このやり方、きっと既出でしょうね。blockMidがいらなくなるので多少ソースもすっきりします。もっと早く気がつけばね〜。

CSSだけでなく、角丸ボックスにはいろいろな方法があるようで試してはいませんが、角丸ボックス・吹き出し：php & javascript roomにいろいろと載っています。

◆サンプル

イメージタグに、例えば「map」というidをふり、getElementByIdでセットしたidの画像を指定したイメージに置き換える。

HTMLは以下の通り。

1. 普段はiPhoneから記事をアップしているが、PCからアップしようとした時にパスワードを忘れてしまい、パスワードの再発行をした。
2. その後、iPhoneでログインして記事をアップしようとしたが、編集しても反映されず、更新すると編集した記事が次々に消えてゆく。
3. 登録したブログを削除し、もう一度登録し直そうとしたが、XML-RPCエラーが出て登録ができない。

まず自分のiPhoneからも登録できるか試したがやはり登録できない。これはやはりWordPressのテーマのソースを疑うしか無い。
制作当初はRSSやFeedはいらないと言っていたので削除していたhead内のそのあたりのソースをとりあえず戻してみた。
しかし、現状は変わらず、ふと、まさか…

これを記述してみると、ブラウザの「ソースを表示」で

とソースを吐き出しました。
設定＞投稿設定＞リモート投稿＞XML-RPCの項目にチェックを入れるとphp wp_head()によって自動的に必要な要素を吐き出すようです。
それ以外でもユーザーの設定によってはここで吐き出すようです。
試しに自分のiPhoneでテスト登録したらできました。早速妻に報告。登録できたよと返ってきました。めでたし、めでたし。

ところで、wp_headタグは実は何？と疑問がわいてきたのですが、wp_headについてはまたよく調べてみよう。

変更を保存するには事前にこのファイルを書き込み可能にする
必要があります。詳しい情報は Codex を参照してください。

と記載されていました。これでは編集ができません。
しかし、以前CoreserverでphpをCGIモードで動作させなければならない状況を経験していたので、ろくにCodexを見ずに、全部CGIモードにしてしまえばいいだろと思い

と.htaccessに記述してアップしました。…が、管理画面のレイアウトが崩れてしまいました。
元に戻して調べてみましたが、制作中のWordpressのバージョンは2.8で、上の様な記述にしてしまうと管理画面のレイアウトが崩れてしまうようです。

»WordPress 2.8 の管理画面がおかしくなる場合の対処法
»WordPress　フォーラム ー 2.8の管理画面のCSSが反映しない

どうやら、2.8では必要なphpファイルだけをCGIモードで動作するよう指定してした方が良いようです。

そこで、その他の調べたページも参考にしながら.htaccessに記述してみました。もちろん、改めてCodexの方も参考に。（最初から見ていればね〜）
今回気がついたのはテーマ編集だけでしたが、他にもファイルのアップロード、プラグインの新規インストール、テーマ自動アップグレード、コアアップグレード（自動バージョンアップ）も制限に引っかかります。

とりあえず、ファイルのアップロード、コアアップグレード、テーマ編集は問題なく動きました。他はまだ試していませんがおそらく大丈夫でしょう？
動作しないものがあれば、そのファイルを特定して、

と随時追加していけばいいようです。

参考サイト：
»セーフモードによる制限と対処方法 - WordPress Codex 日本語版
»[WordPress]xrea系サーバーで自動アップデートする方法 - 猫でいいです（猫雑記）
»XREA で WordPress アップロード機能を使う - WordPress備忘ログ

インストール前の準備

1）MAMPにポートなしで接続できるよう設定を変更する。
インストールする際、URLにポートがついた状態だと、インストールできないので、ポートなしでもアクセスできるよう設定し直しておきます。よろしければこちらの記事「MAMP環境にポート番号なしで接続する」を参考にしてみてください。

2）データベースの作成
あらかじめ、MAMPのmyPHPAdminで、新規データベースを作成しておきます。

3）必要なファイルを準備
wordpress muのファイル：wordpress mu download
最新版（09.09.09現在）は2.8.4です。
wordpress mu 日本語化リソースwpmu-ja
最新版（09.09.09現在）は2.8.2用のものですが、問題なさそうだったのでこれを使います。

Wordpress muのインストール

ダウンロードしたwordpress muを設置したい場所に展開し、wordpress muにアクセスします。
インストールの設定ページが開きます。

1）Blog Addresses　ブログのURL設定

複数ブログのURLの運用方法の設定です。サブドメイン、サブディレクトリのどちらで運用するかを選択します。今回はIPアドレスで運用するため、当然サブドメインでの運用は無理だと思うので、サブディレクトリを選択します。

2）Databse　データベースの設定

myPHPAdminであらかじめ作成しておいたデータベースの情報を入力します。User Name、PasswordはMAMPで特に変更していなければ、ともにrootになります。ホスト名はそのままでかまいません。

3）Server Address　サーバの設定

これは運用するドメインを入力するのだと思いますが、先に書いたようにローカルIPで運用するので、

192.168.***.***/example/

としました。入力欄の下に「IPアドレスやlocalhostは使わないでください」と書いてありますが、自分の場合、これでインストールできました。あと、127.0.0.1/example/でも大丈夫なようです。

4）Site Details　サイトのタイトル、メールの設定

サイトのタイトルと、メールアドレスを設定します。メールアドレスは必ず入力すること。

ページ下のSubmitを押します。

以下のページが表示されます。

初期パスワードが記載されているので万一のためメモっておきます。
ディレクトリのパーミッションを変更してください、とあるのでターミナルなどでパーミッションを755に変更しておきます。
そしてloginをクリックします。

そして、管理画面が表示されたらインストールは成功です。必要があれば、ユーザー > あなたのプロフィールでパスワードを変更しておきます。

Wordpress muの日本語化

1）ダウンロードした日本語リソースを展開。
2）wp-contentにlanguagesフォルダを作成し、ここにja.moを追加。
3）管理画面の Settings -> General の下の方、Blog LanguageでJapaneseを選択、Save Changesをクリック。
4）管理画面の Site Admin ->Options、Site Wide SettingsのDefault LanguageでJapaneseを選択、Update Optionsをクリック。
5）ブログのルート直下にある、wp-config.phpを開き、WPLANGの設定を、define ('WPLANG', 'ja');に変更。

これで日本語で表示されるようになりました。

あとは、ブログの追加など、いろいろ試してみたいと思います。いや〜、疲れた疲れた。

参考サイト
今回はいろいろなサイトを参考にさせていただきました。感謝です。

» HappyPaint-飛-:ローカルOSXにWordPress MUをインストール
» サイト管理者のよんよん日記:WordPress MU のインストール手順
» 130単位:ローカルPCにWordPress MUをインストール

WPMU only works without the port number in the URL

つまり、「WPMUはURLにポート番号が無い状態でしか動作しません！」と怒られたので、この際、MAMPの設定を見直す事にしてみた。

MAMPはデフォルトでポート番号が8888になっており、

192.168.***.***:8888
localhost:8888

と通常は後ろにポート番号を入れて接続するが、ポート番号なしで接続できるようMAMPのApacheの設定を変更してみる。

環境はOSX 10.5.8　MAMP 1.7.1で行っています。

OSXはローカルホストのポートがデフォルトで80に設定されているので、まず、/Applications/MAMP/conf/apache/httpd.confを開き、353行目あたり

ServerName localhost:8888

の部分を

ServerName localhost:80

に変更。

さらに219行目あたり

Listen 8888

の部分を

Listen 80

に変更。

続いて、「システム環境設定 > 共有」を開き、web共有のチェックを外す。外しておかないとポートが競合してしまい、正常に動作しませんでした。

そして、MAMPのサーバを再起動。

あらかじめテスト用にindex.htmlを作成、おなじみの"Hello World!"など書いて置いておき、これでhttp://localhost/または、http://ローカルIPアドレス(192.168.10.10など)/にアクセス、接続できればOK。

これで、Wordpress muのインストールへ一歩近づきましたが、まだ落とし穴がありそうです…

・参考サイト
MAMPとParallelsの開発環境メモ

さて、本題ですが、今までローカルでアクセスする場合、

Mac：http://localhost:ポート番号/
Windows：http://macのコンピュータ名.local:ポート番号/

でアクセスしていました。

Xmarksでブックマークを共有していたのでローカルでアクセスする際、MacとWindowsでアドレスが違うので困っていたのですが、

単純にローカルIPで

192.168.***.***:ポート番号/

もしくは、MacでもWindowsと同様に、

http://Macのコンピュータ名.local:ポート番号/

でアクセスすれば、全く問題ない事に気付きました。
よ〜く考えれば、いや、考えなくてもわかりそうなものですが。

なんでこんな接続の仕方をしていたんだろう、と一つ思い当たる節が…
OSXのシステム環境設定 > 共有 の設定の上部に

ローカルネットワーク上のコンピュータから、次のアドレスで
このコンピュータにアクセスできます：コンピュータ名.local

と書いてあり、ローカルはlocalhostで、その他のパソコンからはコンピュータ名.localで、と深く考える事もなくアクセスしていたという次第であります。いや〜面目ない！

タイトルとは関係ないんですが、MAMPでPerlを動かしたいけれども、稼働しません。他のブログでは、何もしなくても動いているという方もいる様なので、時間のある時にまた試行錯誤する事にします。
今回のように、単純な思い違いの様な気もするのだが…。

ダウンロード先：swfobject - Project Hosting on Googole Code

設置方法は２通りあります。

1）オブジェクトタグを使って静的に埋め込む
2）javascriptを使って動的に埋め込む

1）の方法だと、IEでアクティブコントロールの許諾要求がでるようなので、2）の方法で記述してみます。

<head>〜</head>タグ内に以下のコードを記述

swfもしくは代替コンテンツを表示したい場所に以下のように記述

swfobject.embedSWFの引数に代替コンテンツを表示するオブジェクトのidを指定するだけで代替コンテンツが表示されるようになっています。とても便利。
代替コンテンツの表示部分にはもちろん画像だけでなく、いろいろと要素も入れられます。
このスクリプトの良い所は、JavaScriptオフ、FlashPlayerオン、またはその逆、またはどちらもオフの場合でも代替コンテンツが表示される事です。
これからかなりお世話になりそうなアイテムです。

このサイトに詳しい事が載っています。

»SWFObject v2.0 ドキュメント日本語訳

今までSWFが見られない人のために代替コンテンツを埋め込む事など、あまり意識していなかったのでWebデザイナーとして恥ずかしい限りなのだが、現在のユーザの端末は、PCだけでなく、携帯へも広がっていてPCの様にリッチなFlashコンテンツを読込めないものもあり、今後は意識していかなければならないことでしょうね。