WordPress:月別アーカイブwp_get_archivesを使いつつCSSでデザインしたいときのPHP

便利なアーカイブwp_get_archivesもデザインしたいときは困る

月別のアーカイブページを下のようなデザインにしたい。
LIFELOG 3
でも実際は、

wp_get_archivesを使うと、

LIFELOG 4
こんなふうに「○年○月」まで丁寧にでてしまう。

それだと困るのでPHPで修正。(ほぼ先輩だより)

やり方

目指すHTML

<ul>
	<li><a href="archives/date/2015/3"><span class="year">2015</span><span class="month">3</span></a></li>
	<li><a href="archives/date/2015/2"><span class="year">2015</span><span class="month">2</span></a></li>
</ul>

作成したコード

<ul>               
   <?php
        $list = wp_get_archives(array('echo' => 0)); //echoさせずに取得
        foreach (explode("n", strip_tags($list)) as $line)
        {
            $line = trim($line);
            if (!$line)
            {
                continue;
            }

            $year_month = explode('年', $line);
            $year_month[1] = preg_replace('/月/ui', '', $year_month[1]);

            echo "<li><a href="archives/date/{$year_month[0]}/{$year_month[1]}"><span class="year">{$year_month[0]}</span><span class="month">{$year_month[1]}</span></a></li>";
        }
    ?>
</ul>

これで
LIFELOG 3
思ったとおりのデザインになりました。
(CSSは省略)

【超基礎というか低レベルでごめん】HTMLやCSSでの今まであった困ったときの原因

このページについて

ブログからHTML、CSS、そしてWordPressをつまづきながら勉強してきた際に、
特に多かった原因をまとめておこうかと思います。

こんなことかよーー!!!
ってのばかりなんですよね。

コーディング全般

全角スペースが入ってる

これは本当によくありますよね?
HTMLとCSSで組み始めて「float」にひーひーしている時に、これが原因で崩れたりしてるんですけど、
難しい「float」に何か原因があるはずだぁ!!!!うわぁぁぁぁ!みたいになってたなぁ・・・

最近では、WordPressの組み込みPHPの改行中に全角スペース混じっていて
「なぜかインデントがはいってしまう〜」なことがありました。
でも、いまでは、あぁどこかに全角入れちゃってるのかな。と思うようになりました。

タグが欠けてる

いろいろ修正しているあいだに、「<」や「>」、「/」を消しちゃったりするんですよねぇ。
それで見た目が大幅にくずれたりして、うぉ〜〜〜もうやる気なくした。
なんて事ありました・・・

WordPress

WordPress投稿編集画面にはコメントはいれてはダメ

先輩から依頼され、HTMLをWordPress化してる時に、3時間ハマりました。
HTMLから本文にあたる部分をよいしょっとコピペしただけなのに、
おもいきりデザインが崩れるんですよ・・・・

はじめは上記の先輩のHTMLにタグの抜けや欠けがあるのかも!
とか思うんですけど、違う。

結局、

</div><!---container-->

みたいにコメントが入ってると、変になるってことでした。
コメントを消したらちゃんと表示されました。

ほんと、なんでこんなことで数時間も・・・
ってことが沢山あったなぁ・・・

本サイトで参考にしたデザイン&CSSのWEBサイト&本

作りたいものは中身でデザインは簡単に

これでも一応プログラマ志望というか、プログラマ・・・なので、
デザインに時間をかけるよりも、本業の勉強に時間をかけたい。
なので、今は?コピペでもよいからとにかく早くサイトを作りたい!

という思いから作成しました。

下記、まとめです。

ナビゲーションや記事の枠組みデザインCSSはCSSデザイン集から!

こちらには大変お世話になりました。
使える素材が沢山載っています。

背景画像はsubtlepatterns.comより

LIGさんの記事「これが無料!?背景画像のフリー素材配布サイト 14選」で見つけた
Subtle Patternsというサイト。
沢山種類があってオシャレ!

「時計マーク」や「タグアイコン」等アイコンフォントはFont Awesomeから

リンク先を貼れば、ダウンロードしなくても使えるというのがとても便利なFont Awesome


もとはこちらの本で知りました。この本もFont Awesomeを使ってます。というか、この本は初心者には最高にオススメです!

見出しのデザインはCSS見出し ジェネレータ

ググったところ見つけました。
見つけて思ったのが、あ、これ利用してる人多いな・・・他のサイトでちらちら見る。
CSS見出し ジェネレータではリボン風に生成できますが、私はその部分を削除して作ってます。

BIOGRAPHY部分の経歴につかったCSSデザイン

参考になるものばかり載っているWEBクリエイターボックスさんの記事「経歴や会社の沿革ページに!簡単なCSSで実装するタイムライン」を参考にしています。

引用部分に使ったCSSデザイン

CSS Lectureというサイトのblockquote(引用部分)をCSSでデザインするサンプル集から利用させていただきました。
クォーテーションマークの無料ダウンロード探しましたが、どうもリンクが切れているようで、なしで作成しました!

ソースコードの表示にはSyntaxHighlighter

こちらもぐぐって見つけました。結構利用されてる方多いですよね。
利用方法はこちらのサイトで確認しました。

最後に

なんていうか、コピペベースである程度のものは作ることができるようになっていますね。
著作権フリーの同じ写真素材もいろんなサイトでみたり笑

オリジナル力をもっと高めいくのも目標です。