スタイルをシンプルなものに変更

スタイルをよりシンプルなものに変更した。1カラムにすることで、よりスッキリした印象を与えるのが狙い。

結構前から、白い背景に黒いテキストのサイトにハマっていて(そのサイトが有益なものなら尚更)、余計なものをとことん省いているストイックさに痺れる。だけど自分がそれをやると何故か味気ないので、なんとかフォントや色味や配置やホワイトスペースを駆使して”Design”に昇華させたいのだけど、それが難しい…。

とりあえず以前のスタイルはDocumentsページにぶち込んだ。その作業をしている途中で、さらに以前のスタイルを見つけて懐かしんでいた。やっぱり何かを残すっていうのは後で振り返るときに良い。そしてそれを発見しやすい・残りやすいのがWebの良いところだと思う。

ところで、以前からトップページがクソ重かったのだけど、多分広告のせいだと思うので、1つだけの表示にした。別に広告で稼いでいるわけではないのだけど、表示していると「ぽい」ので。収益は1年経っても1,000円行ってないし(´;ω;`)

なるべくCMSの恩恵を受けられるように、何かを変えたら全部が変わるように、またPHPをちょこちょこ弄った。今さっきの1記事目のみ広告表示とか、個別ページ(ディレクトリ)の子ページは個別に書いたHTML(DOCTYPEから)を適用させるとかとか。一応例を書いてみる。

if (is_page('about') or is_page('documents') or is_page('link')) {
    // headerとかfooterとか予め用意してあるテンプレを読み込む
} else {
    // 1から書けるように、headerとかfooterなどを読み込まない
    // Web(WordPress)上から編集できるように
    if ( have_posts() ) :
    while ( have_posts() ) : the_post();
    the_content();
    endwhile;
    endif;
}

何の事は無い、このサイトにはAbout、Documents、Linkの個別ページがあるので、それ以外を個別にHTMLが書けるようにしただけ。これ、親である個別ページが膨大になってきたらどうするんだろうね。or連発するのだろうか…。もっとスマートなやり方があるだろうけど、ひとまずこれで。

○記事目で条件分岐させるやり方は、「投稿記事の○件目」で条件分岐させるWordPress カスタマイズまとめを参考にした。

他にも次ページ・前ページの部分とか、検索結果ページとか、カテゴリインデックスページとか、修正したいところがいくつかあるのだけど、ちょっともう今日は体力の限界なので、これから少しずつこっそり修正していこうと思う。仕事でもさんざんやってるのに、プライベートでも2~3日徹夜とか、ホントWeb制作って楽しいなぁ。

サイト実装時に調べたことまとめ

まだ固定ページとか全部終わってないけど、作っている時に調べたこと(サイト)のまとめ。主にWordPress、というかPHPについて。ノンプログラマがやるとこうやって回り道することもあるけれど、それらを調べてる時間も本当に楽しい。

WordPress Codex 日本語版

WordPressの公式オンラインマニュアル。大抵のことはここを見れば載っている。はず。詳しく知りたいときは原文を見に行く。でも、それを言い訳にはしたくないけど、ノンプログラマは原文見たって翻訳見たって分からないものは分からない。

WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方 | Webデザインレシピ

テンプレートファイルの役割とか基本的なことを知るのに良いまとめ。自分は仕事で元々ある静的なサイトをCMS化したりとかしてたので、ある程度はテンプレートファイルの仕組みを理解していたので、理解しやすかった。

WordPressでカテゴリ一覧リストの様にタグ一覧リストを表示する方法 | ale cole blog

カテゴリ一覧はwp_list_categories()という関数で出せるのだけど、タグ一覧を出す関数が無いっぽかったので、こちらの記事を参考にした。当サイトのサイドバーのタグ一覧は以下のコードでABC順で出力させている。

<h1>Tag</h1>
<ul>
    <?php
        $tagList = $wpdb->get_results($wpdb->prepare("
            SELECT t.term_id,t.name,t.slug,tt.count
            FROM $wpdb->terms AS t
            JOIN $wpdb->term_taxonomy AS tt
            USING(term_id)
            WHERE tt.taxonomy = 'post_tag'
            ORDER BY t.name ASC
        "));
        foreach ($tagList as $value) {
    ?>
    <li><a href="/tag/<?php echo $value->slug; ?>/"><?php echo $value->name . '<span class="post-count"><span class="paren">(</span>' . $value->count . '<span class="paren">)</span></span>'; ?></a></li>
    <?php } ?>
</ul>

How to Customize the Display of WordPress Archives in Your Sidebar | WPBeginner

月別一覧を「/yyyy/mm/」形式で出力させたかったのだけど、相当調べたつもりだけどうまくいかず、たどり着いたのがこの記事。なんとなくやってることは分かるのだけど、もっとスマートな方法がありそうな気がするので、詳しい説明は省く。当サイトのサイドバーの月別一覧を出力させているコードは以下。

<h1>Archive</h1>
<ul>
    <?php
        global $wpdb;
        $limit = 0;
        $year_prev = null;
        $months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month , YEAR( post_date ) AS year, COUNT( id ) as post_count FROM $wpdb->posts WHERE post_status = 'publish' and post_date <= now( ) and post_type = 'post' GROUP BY month , year ORDER BY post_date DESC");
        foreach($months as $month) {
    ?>
    <li><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>/"><?php echo date("Y-m", mktime(0, 0, 0, $month->month, 1, $month->year)) . '<span class="post-count"><span class="paren">(</span>' . $month->post_count . '<span class="paren">)</span></span>'; ?></a></li>
    <?php } ?>
</ul>

ヘッダーバナー(画像)をトップページ(index)以外に表示させない方法(wordpress) – バングラデシュに愛の花を咲かせよう

こちらの記事を参考に、トップページ(http://simpleism.net/)以外ではtitle属性に「○○ | SimpleIsm」というように、タイトルとサイト名を出力するようにしている。普通にCodexを見れば分かりそうだけど、何も知らないのでとりあえず「WordPress トップ以外」というような検索の仕方をして、その時に出てきたこちらの記事を参考にさせていただいた。title属性は以下のようなコードを書いて出力させている。

<title>
    <?php if(!is_home()) { echo the_title() . ' | '; } ?>SimpleIsm
</title>

wp_list_categories() を使わずに get_terms() でカテゴリ一覧を表示する | MacBook Air とWordPressでこうなった

カテゴリ一覧を出力させるコードの参考にさせていただいた。この記事のあとにWordPress でカテゴリ一覧を取得する場合は get_terms() じゃなくて get_categories() を使った方がラクチンという記事を書いておられていて、確かにその通りなのだけど、rel属性が付加されて、その属性値(category tag)だとHTML5でinvalidになってしまう。WordPressのカテゴリーリストからrel属性をカットする | LD.ymst.net | 郡山市でホームページを制作している人のブログのコードをfunctions.phpに書くと消せるらしいけど、当時function.php(sが抜けてる)というファイル名で編集しており、全然反映されねー!ってなり、get_terms()で出力させている。パフォーマンスに影響を与えないのであれば、このままでいいかなと思っている。ちなみに、現時点で当サイトではfunctions.phpは使用していない。

<h1>Category</h1>
<ul>
    <?php
        $terms = get_categories();
        foreach ($terms as $term) {
    ?>
    <li><a href="<?php echo get_category_link($term->term_id); ?>"><?php echo $term->name . '<span class="post-count"><span class="paren">(</span>' . $term->count . '<span class="paren">)</span></span>'; ?></a></li>
    <?php } ?>
</ul>

WordPressで指定した固定ページを読み込む方法 | bl6.jp

固定ページ専用のsection要素のid属性を出力させるコードの参考に。

PHPでURLに対するfacebookのいいね!数とtwitterのtweet数を取得する « Just Another Life

各記事のソーシャルボタンをテキストベースで表示したかったため、参考にさせていただいた記事。

WordPressのタグをurlエンコード | Base Views

ソーシャルボタンのhref属性には記事のタイトルが入るのだけど、当然日本語などのマルチバイト文字が入ることもあり、それをエスケープするためのコードを書くときの参考にさせていただいた。

null判定や空文字判定からPHP関数の動きに気を付けることを学ぶ | 村式流 イッパシエンジニアへの道

PHPのisset,empty,is_null – モトクロスとプログラムと粉砕骨折と

ソーシャルボタンではてブのみ、ブックマークされていないと何も表示されないため、ブックマークされていないときでも”0″と表示されるようにしたかったので、そのときの参考にさせていただいた。

ちなみに、ブックマークされていないURL(file_get_contents(URL))をvar_dump($hoge)するとstring(0) ""という結果になる。で、これを”0″と表示させる判定は以下のどれがプログラマ的なのかを同僚に聞いてみた。

if($hoge == null) {
    echo "0";
}

if ($hoge == "") {
    echo "0";
}

if(empty($hoge)) {
    echo "0";
}

で、答えとしては明確に""を判定したいのなら、イコールを3つ使うのが一番厳密だけど、nullや数値型の0のときも”0″と表示したいなら、emptyで問題ないとのこと。全部まとめたのが以下のコード

<div class="social">
    <?php
        $get_twitter = 'http://urls.api.twitter.com/1/urls/count.json?url=' . get_permalink();
        $json = file_get_contents($get_twitter);
        $json = json_decode($json);
        $tweets = $json->{'count'}; //ツイート数

        $get_facebook = 'http://api.facebook.com/restserver.php?method=links.getStats&urls=' . get_permalink();
        $xml = file_get_contents($get_facebook);
        $xml = simplexml_load_string($xml);
        $likes = $xml->link_stat->like_count; //いいね!数

        $get_hatebu = 'http://api.b.st-hatena.com/entry.count?url=' . get_permalink();
        $hatebu = file_get_contents($get_hatebu); //はてなブックマーク数
        if(empty($hatebu)) {
            $hatebu = '0';
        }
    ?>
    <ul>
        <li class="twitter">
            <a href="http://twitter.com/share?text=<?php echo urlencode(the_title("","",0)) ?>&url=<?php the_permalink(); ?>" onclick="window.open(this.href,'window','toolbar=no,width=650,height=450');return false;">t</a>
            <span class="count"><?php echo $tweets ?></span>
        </li>
        <li class="facebook">
            <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php echo urlencode(the_title("","",0)) ?>" onclick="window.open(this.href,'window','toolbar=no,width=650,height=450');return false;">f</a>
            <span class="count"><?php echo $likes; ?></span>
        </li>
        <li class="hatena">
            <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo urlencode(the_title("","",0)) ?>" onclick="window.open(this.href,'window','toolbar=no,width=510,height=500');return false;">B!</a>
            <span class="count"><?php echo $hatebu; ?></span>
        </li>
    </ul>
</div>

WordPress 記事ページが404エラーで表示されなくなった時の対処法 覚書 | ブログアフィリエイトとメルマガで稼ぐ アフィリエイト講座

タイトルの通り。助かった…。

以上が調べたことまとめ。301リダイレクトとかも調べたけど、それは今回は割愛。コードも冗長的で汚かったりするものもありそうだけど、まずは形にすることが大事だと思うので今のところはOK。調べてトライアンドエラーを繰り返してる間本当に楽しかった!やっぱこういうのだよなーと改めて思った。

それでは、このサイトを作った当時も書いていたけど、参考にさせていただいたサイト及び管理人の方々、どうもありがとうございました。

CMSをMTからWPに変更 & サーバをロリポップ!からさくらインターネットに変更

大分遅くなりましたが、明けましておめでとうございます。

実は去年からちょいちょい作業はしていたのですが、2013年一発目ということで、デザインを変更しました。さらに心機一転、CMSをMovable TypeからWordPressに変更しました。新しく設計し直したので、HTML5で書き直しました。昔と比べて大分柔軟というか、良い意味で適当にマークアップするようになった気がします。何でもかんでもラップ(wrap)したがるようになったのは仕事柄かな。

理由はいくつかありますが、サーバもロリポップ!からさくらインターネットに変更しました。CMSとサーバを変更しましたが、きちんと昔の記事も見られるようにしてあります(MTは静的に出力するので、移行は簡単だった)。その際にPHPファイルへのコンテントネゴシエーションでのリンクで、404が返ってきてしまい、ほとんどのページをPHPで出力しているので、ディレクトリ以外のほぼすべてのページが見られなくなってしまい(HTMLファイルやCSSファイル、画像などは拡張子無しでも見られる)、しばらくハマっておりました。

さくらインターネットでは.htaccessにOptions +MultiViewsは書けないので、にっちもさっちもいかず問い合わせてみたところ、ロリポップ!とのApacheのバージョンの違いによるもののようでした。以下引用。

現在さくらのレンタルサーバサービスでは、新規にお申し込みいただきましたサーバは Apache 2.2 系がインストールされております。

Apache 2 系では、MultiViews のデフォルトの設定が Any から NegotiatedOnly に変更されております。この為、以前にご利用しておられましたサーバが Apache 1.3 系であった場合、動作に違いが出る事が考えられます。

Apache 1.3 系と同様に Any での動作をご希望されます場合は、.htaccess にて、MultiviewsMatch ディレクティブの設定をご変更くださいますようお願いいたします。

▽ 参考リンク
http://httpd.apache.org/docs/2.0/mod/mod_mime.html#multiviewsmatch

さくらインターネット カスタマーセンター

というわけで、.htaccessにMultiviewsMatch Anyを追記したら直りました。問い合わせしてからもググりながらトライアンドエラーしてたのですが、結局解決に2日ぐらいかかってしまいました…。

まぁ直ったのでとりあえず結果オーライです。まだIEでの見た目とか検索用ページとかちょこちょこできてない部分があるのですが、そこは今週中ぐらいに終わればいいかな。それにしてもWordPressもといPHP楽しいー!

ではでは、今年もどうぞよろしくお願いいたします。