ホームページ制作のアレ

最近すっかりメジャーになったwordpress用の問い合わせフォームプラグインMW WP Form。その機能の一つに、問い合わせデータをデータベースに保存し、管理画面から閲覧できるというのがあります。

で、保存したデータを管理画面で閲覧できるだけでなく、CSVでダウンロードできるのもポイントの一つですが、ある日突然そのCSVダウンロードボタンが消えて困った思いをした事はありませんでしょうか。
本日、その原因のひとつを突き止めました。原因はずばり、これまたメジャーどころのバックアッププラグイン「BackWPUp」の出力するcssでした。
修正方法ですが、
plugins/bakwpup/assets/css の中に backwp.min.cssがありますので、その中の
#wpfooter{overflow:hidden}
こちらを削除してしまえばOKです。※.min系ですので、改行なしで横にだーっと一列に記述されていますが、一番後ろの方にあります。
#wpfooterは管理画面の共用idですので、他にも思い当たるフシがありましたら、上記のcssを疑ったほうが良いかもしれません。

wordpressをCMSとして使う時、どうしても気になるのが、パーマリンクをいじっても、各カテゴリのURLの頭に 「category/(カテゴリ名）」とついてしまう事です。 (別に問題があるわけではないのだが、なんだかかっこわるい…気がする。） そこで、この「category/」を取り去ってしまうプラグインを、自分用のメモを兼ねてご紹介します。 http://wordpress.org/extend/plugins/wp-no-category-base/ こちらを導入すると、 www.art-labo.net/blog/category/abc/def.html www.art-labo.net/blog/abc/def.html どちらのＵＲＬにアクセスしても、 www.art-labo.net/blog/abc/def.html としてちゃんと表示されます。リンクＵＲＬの書き方も ＜a href=”＜?php echo get_option(‘home’); ?＞/abc/def.html と、category/無しのままで大丈夫です。

このブログも記事が２０件超えたので、そろそろ「データのバックアップ」が気になりだしました。 静的ホームページと違い、ブログのコンテンツはサーバーに保存されるので、そちらが万一 飛んでしまったら、お手上げなのです。 MTでは、ブログ全体を（デザインまでひっくるめて）バックアップするボタンがあったのですが、 Wordpressでは、どうやら、phpmyadminからDBのバックアップをとる、しかないらしい…ので、 ちょっと調べてみたところ、WP-DBManagerというプラグインを導入すれば、自動的に バックアップをとってくれる、との事。 ネタ元は、MTの改造でも散々参考にさせて頂いた「小粋空間」様です。 http://www.koikikukan.com/archives/2009/07/23-015555.php 早速、プラグイン配布サイト http://lesterchan.net/portfolio/programming.php から、プラグインをダウンロードします。 次に、日本語化ファイルを、配布サイト http://wp.mmrt-jp.net/plugin-japanization-project/dbmanager/ からダウンロード。こちらの説明に従って、解凍して出来たファイルを、WP-DBManagerの フォルダ内に放りこみます。 後は、いつもの手順で、プラグインフォルダにアップして、管理画面で有効にした…ら、 小粋空間の説明にもありました「Your Backup folder MIGHT be visible to the public」の 警告がでました。「お前のバックアップデータいれるフォルダ丸見えだぜ」て事ですね。 でも、FTPで辿ってみても、そんなフォルダが存在しないので、？？？となりつつ、 表示されていたパスの通りに、「backup-db」というフォルダを作製して、 付属していたhtaccess.txtをアップして、.htaccessにリネーム。 したら、動作しました。 あとは、管理画面左に「データベース」というメニューが追加されるので、色々と設定をするだけです。 このブログは、大体２～３日に１記事のペースが多いので、３日に１回の自動バックアップ設定にしました。 いまのところ、ちゃんと動作しています。 自動的にバックアップをとってくれているというのは本当に素晴らしい！ どんなに便利に、簡単にしても、「手動」である限り、うっかり忘れる事というのは避けられませんからね。

このブログは、ホームページ制作関連やwordpressなどのCMS関連の話題で書いているのですが、いかんせん、テーマのセレクトの関係で 「画像」に乏しいのが弱点です（内容云々は置いておいて、写真が無くて文字ばかりだと単純に読みにくいですよね）
そこで、FlickrからCCライセンスの写真をキーワードで探して、貼り込んでくれるプラグイン「PHOTO DROPPER」を導入してみました。

参考にしたサイトはこちら
http://phpspot.org/blog/archives/2008/10/photo_dropper.html

http://www.photodropper.com/wordpress-plugin/
こちらからダウンロードして、 解凍してできたフォルダを、ブックマークプラグインの時と同じように、wp-content/pluginsフォルダに放り込みます。

次に、管理画面の「プラグイン」で、今導入したプラグインを使用する設定にするだけでＯＫ。
記事を書く画面のアップロード/挿入の一番右に、黒地の「Pu」というアイコンが追加されます。

あとは、記事を書いていて、「ここに写真を入れたいな」というところで、「Pu」アイコンを押して、出てきたフォームにキーワードを入れて検索。
すると、写真一覧が表示されるので、使いたい写真の下のS|M|Lのどれか（大きさですね）をクリックすると、 ↓このように挿入されます。ちゃんと必要なクレジット表記もしてもらえます。

photo credit: John Kratz 欠点としては、XHTML的にちょっとよろしくないタグを使ってしまっている（align=”absmiddle”とか）という点が上げられますが、まぁ、これくらいは眼を瞑るとして…

ちなみに導入すると、管理画面の「設定」メニューの一番下に、PHOTO DROPPER用の設定が追加されています。

各記事の右下にあるやつです。押すとその記事が各ブックマークに送られます。

まず、 http://wp.graphact.com/2007/07/11/96 こちかからwp-hatenaプラグインをDLさせて頂いて、wp-content/pluginsフォルダに放り込みます。 次に、管理画面の「プラグイン」で、今導入したプラグインを使用する設定にして、あとは所定の場所にソースを書くだけです。 このブログでは、さすがに全部ならぶとうざそうなので、弊社で利用しているものを中心にということで <div class=”bookmarklink”>
<?php if(isset($wph)) {
$wph->addHatena();
$wph->adddelicious();
$wph->addLivedoor();
$wph->addYahoo();
$wph->addBuzzurl();
$wph->addnewsing();
}?>
</div>
こんな感じにしてみました。

XHTML文法チェッカーで見たところ、多少怪しい記述が書かれてしまうようですが…

記事の右上に表示していた日付を、カレンダーのようにしてみました。

カレンダーの元となる画像は、
http://www.smashingmagazine.com/2008/02/22/gallery-of-date-stamps-and-calendars/
ここに沢山あるので、頑張ってここにあるものと被らないように日めくりの画像を作成します。

こんな風になりました。

次に、日付の部分のソースを
<div class=”entry-date”><?php the_time(‘Y/m/d’) ?></div>
から
<div class=”entry-date”>
<span class=”entry-month”><?php the_time(‘M’) ?></span>
<span class=”entry-day”><?php the_time(‘d’) ?></span>
</div>
に変更。
※最初、<span>のところを<div>にしようとして失敗しました。divの「d」が、wordpressに「日」の引数 として判断されて、タグが崩れてしまったのが原因な気がします（深く調べなかった）

次に、css（弊社のは、オリジナルのテンプレートですので、クラス名やパスはお使いのテーマにそって変更してください)に、
.entry-date {
text-align: center;
color: #666666;
background: url(images/blog_date.gif) no-repeat right top;
height: 56px;
float: right;
margin-right: 15px;
margin-left: 15px;
}
.entry-date .entry-month {
display: block;
padding-top: 15px;
font-weight: bold;
font-size: 10px;
color: #999999;
width: 56px;
}
.entry-date .entry-day {
display: block;
color: #0096cc;
font-weight: bold;
font-size: 16px;
width: 56px;
}

こんな感じで書いてしました。で、完成。IE6とFirefoxで確認してあります。
こんなんで一時間くらいかかってしまいました。ホームページデザインの仕事の合間を縫ってwordpressの修行はまだ続きます。

たまにはURLやTIPS以外に「ホームページ制作の仕事の姿勢、ポリシー」関連の事も書こうと思っているこのブログ、 本サイトにご訪問して頂いたお客様以外にも読んで頂きたいので、数箇所のpingサーバーに登録してみる事にしました。

リンクボタンは、どうせならオフィシャルのものを使おうと思ったので、まずADD Yahoo!ボタンを設置してみることに。
参考URLはこちら
http://my.yahoo.co.jp/s/guide/button/addtomy/index.html

しかしなんか、その後追加してみたボタンを並べたけど、どれもサイズが微妙に違う…やはり自作したほうがよいかもしれません。

とりあえづ、プレーンな感じのテンプレート（Wordpressではテーマと呼ぶらしいですが、どうにもMTの癖が抜けない）を作成し終わったので、これからすこしづつ改造してゆきます。

一回めは、「トラックバックURL表示BOX」を記事の下につけてみることにしました。
参考にしたURLはこちら
http://www.techdego.com/2007/03/wordpresstrackback-url.php
一発ですんなりできました（当たり前か）
条件分岐はMTタグのほうが理解し易いですが、wordpressもまた、別の方向での分かり易さがありますね。