ブログ

サイトリニューアルは、10年ほどほったらかしたmobile Me におさらばして、FC2レンタルサーバーLiteに変更しました。理由は月額300円と安いのと、Wordpress のインストールが用意されていて簡単なことです。何度でもインストールをやり直せます。

WordPress でのインストール作業でわずらわしいのはやはり、wp-config.php を編集してMySQLというもののデータベースの設定をすることですが、これを避けて通れるだけでもデザイナーの私には大変助かります。

何度もトライしているけれど、忘れないように自分用の長文の覚え書きです。

 

WordPress でブログ立ち上げを前提としつつも自分自身のポートフォリオを見やすく閲覧してもらうのが目的でもあるので、デザインはブログっぽくではなく企業サイトのような趣きに仕上げたいし、別途プロモーションサイトも用意できるよう、Wordpress のマルチサイト機能を有効化します。これは自動では行えないので、私は参考書を使います。すでにWordpress でのデザイン作業を仕事としてで行っていますので経験済みですが、何度も本を見てチェックして進めました。

 

マルチサイト化　｜　デザイン作成　｜　コーディング～PHP　｜　投稿し再コーディング

デザイン上必要なプラグイン javascript　｜　Google対策　｜　ショップページ

 

 

◆マルチサイト化

ここではwp-config.php を編集せざるを得ません。マルチサイト化はWP本体は１ディレクトリだけで別ドメインを扱えるのが便利なのです。ただしFC2 Lite ではマルチサイト化した場合、サブドメイン形式でのインストールはできない模様です。私はマルチサイト化は可能でしたが、サブディレクトリ形式となりました。これは予定していた形式と違ってしまいました。こういうページもあったのでよく調べておけばよいことでした。

 

• pabro.osaru.us/www/ というふうにルートディレクトリへのインストールがかなわなかったのです。FTPでインストールすればこの限りではないと思われます。よってマルチサイト化においてのURLは/www/ にぶら下がって、/store/ というふうになります。
  でもFC2のコントロールパネルにサブドメインマネージャというのがあって、ごまかせそうな気はしています。

 

◆デザイン作成

WPのインストールとは前後しますが、すでにサイトデザインはほぼ終えていますので、静的（スタティック）なHTMLをphp に書き直してアップしました。そのプロセスは以下のようなものです。
サイトのデザインはほぼ必ず Fireworksで作成します。Photoshop でも可能ですがWEBに特化した機能はやはりFireworksの方が効率がよいようです。もっとも一枚絵を作成し、細かく切り出せればよいことなのでどちらでもかまいません。

 

◆コーディング～PHPへ

FWで書き出したテーブルHTMLを一旦CSSで組みなおします。CSS は作業する人の潔癖性が問われるような作業です。コーダー専門職ではないので毎回勉強です。
静的ページは流用箇所を意識してコーディングを行います。WPにおける流用箇所は「ヘッダ」「メニュー」「サイドバー」「フッタ」にあたるところを、どんなコンテンツが入っても共通したデザインフォーマットで表示させるところです。たとえばヘッダにあたるコードを<DIV ID=”header”>***</DIV>で囲んでおき、そこをあとでPHPの呪文と置き換えうるという作業です。わかりやすいID名を割り振っておけば、あとでPHPにするとき見つけやすいですから。同様にコーディング中にサイドナビを<DIV ID=”sidebar-left”>***</DIV>などとやっておけばいいのです。

 

• 完成した複数の静的ページは、流用箇所は同じコードが記載されています。投稿内容に相当するコンテンツのみが「About」だったり「Works」だったりするようなHTMLとなっています。この投稿内容の箇所も<DIV ID=”main-content”>***</DIV>とでもして括ります。
• そして、括られた箇所はそれぞれ、header.php　sidebar.php　footer.php　として切り分けて読み込み用のテンプレートタグと置き換えます。
• 肝心の投稿内容を表示する箇所にも投稿用のテンプレートタグを記載して、コンテンツ原稿は削除してしまいます。これで、スカスカのフレームが完成です。これをCSSと一緒にアップすれば、WPがPHPを合体して書き出してくれるというわけです。

 

◆投稿し再コーディング

投稿はWPにログインしてダッシュボードから行います。新規投稿でブログあるいは固定ページを指定して投稿するとスカスカのフレームデザインにメインコンテンツが投稿されてることになります。このようにすることで以降固定ページもブログもHTMLを編集することなく更新を行うことができます。
しかし、よりリッチなデザインを考えると、投稿されたコンテンツ内も複雑なCSS処理が必要ですが、WP特有のショートコードや、PHPを用いた動的処理を投稿時にHTMLとして書き加えることで可能です。ただしいくつか問題があります。HTML投稿時はPHPが使えない、ということ。あくまでもWPのバックグラウンド処理のようなのです。それからWP独自の整形処理で勝手にPタグが挿入されて、奇妙な空きができてしまったりレイアウトが崩れてしまうという現象にぶつかりました。これは去年携わった仕事の時に解決済みでしたので、その経験値で回避しました。
PHP投稿の件は「Exec-PHP」というプラグインで回避できます。たいへん助かるプラグインでした。
勝手Pタグはテーマフォルダ内の「functions.php」に「remove_filter…」という一文を書き加えることで回避できます。他にも改行コードに関するプラグインもあり、有志の方々がみんなでWPを使いやすいものにしようとされておられます。

なんとかWPがまともにブログ原稿をページとしてを書き出すようになっても完成しません。テンプレートタグによって書き出された「生の状態」のHTMLソースに対してCSSを駆使して再度デザイン処理を行います。ここからは画像ソフトとHTML編集ソフトとFTPを使い、アップしては書き出し整形ということの繰り返しです。ここにハマるとなかなか抜け出せません。

 

• 用意する基本テンプレートは、index.php　意外に多岐にわたるのでそれぞれ同じような作業が待っています。これらを終えて、ようやくまともな投稿ができるようになります。できてしまえば何ということはありませんが、古いブラウザの動作チェックなどもありプロセスは限りなく多いように感じます。このサイトではIE６を切り捨てています。

 

◆デザイン上必要なプラグイン javascript

しかしWPを使うことの利点は、完成後メンテナンスが簡単です。管理もしやすく、SEO的にも強いと言われています。手離れしてもお客様の方で更新しやすいということがあります。またオープンなソースなので無料で利用でき、良い点がさらにどんどん改良されてより使いやすくなっているようです。

 

• サイトのデザイン上に於ける絶対必要なプラグインは現在このようになっています。
  
• Exec-PHP　投稿のPHPを有効にする
  
• Contact Form 7　お問い合わせフォームを作成する
  
• Maintenance Mode　作業中、外部アクセス不可にする
  
• Skitter Slideshow　スライドショーをアニメーションで表現する
• このほかに、header.php 内にJavascriptソースを記述しています。
• google.load(“jquery”, “1.7”);　jQuery をオンラインでロード
  
• smooth.pack.js　ページ内リンクをスムーズにスクロールさせる
  
• thickbox.js　画像を背景を隠してスライド表示させる。
  
• これらのほかにそれぞれのプラグインやJSを制御するCSSが読み込まれています。なんて複雑なんだ。

 

◆Google対策

最後にGoogle Analytics　に登録した上で固有IDを記載するプラグイン
Ultimate Google Analytics　を設定。
XML Sitemap を出力するプラグイン
Google XML Sitemaps with Multisite support　を設定。

 

• 後者はマルチサイト用です。最近出たようです。上位ディレクトリにうまく出力できなくて閉口しましたが、「サイトマップファイルの場所」項目で表示されている「自動検出」に記載されているURLに、同等同名の空ファイルをアップロードしパーミッションを書き込み可能666に設定、再度書き出すと成功しました。自動検出では「sitemaps/サイト名.xml」となっています。マルチサイトだからかもしれません。これで最低限のGoogle対策が完了です。

 

以上が大まかな流れ。もっとも、これはある意味我流ですから、正攻法を模索し続けることになるでしょう。
あとは残された未作成のテンプレート、修正が必要不可欠ということになると思いますが、工事中のStore にWelcart e-Commerce をインストールするつもりでいます。
こちらはショップのデモサイトを構築する予定です。