WordPress

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

月別のアーカイブページを下のようなデザインにしたい。

でも実際は、

wp_get_archivesを使うと、

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

それだと困るので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>

これで

思ったとおりのデザインになりました。
（CSSは省略）

ガーデニングブログの写真アップがとにかく遅い

画像を沢山アップするガーデニングブログ。
通勤途中、スマホから記事を投稿したいのに、
アップロードに失敗がたびたびおこる。

アップロードするととにかく遅い。
トイレに行って戻っきてもまだやっている。

プラグインのチェック！P3 – Plugin Performance Profiler

必見！これで解決しました！WordPressの管理画面がなんか重い･･･と感じたら。

こちらを参考に。プラグインが原因ではとのことなので、
早速P3プラグインを試してみました。

１回目

結構割合を占めてるプラグインを停止してみる。変わらない。
画像圧縮がよくないのか？
と思い、そこまで負担がかかてなさそうな「WP Smush.it」をとめてみる。

あ、なおった・・・

その後で、「WP Smush.it」は重くなるのかぐぐったらでてきました。

【WordPress高速化プラグイン】1クリで全画像圧縮！「EWWW Image Optimizer」と「WP Smush.it」

そこで、上記の記事がオススメしている「EWWW Image Optimizer」をいれてみる。
そしてまたｐ３プラグインで試してみる。

あれ？「WP Smush.it」よりも「EWWW Image Optimizer」の方が負荷かかってるような？

でも、「EWWW Image Optimizer」を有効にした状態でも
写真のアップロードはスムーズに行えました。

WordPress内のリンク切れをチェックするプラグイン。

有効化すると、設定画面にあらわれて、
一般の上部「ステータス」にリンクエラーが表示される。

わー便利〜〜

こんな感じに。
あ〜YouTubeリンク切れはありがちだろうな。

ソースコードをきれいに表示するプラグインといえばSyntax Highlighter

使えそうなショートコード

2013年4月出版のこの本を読んで、へーっと思ってやってみたけれど、
効かないのでなんでだろ？と思ったら、
なくなってたりするのかも。

結局、
ダッシュボード＞設定＞Syntax Highlighterの一番下を確認するのが
スマートかと。
いろいろあったけど、使えそうなのは
ハイライト位？

こんな風に「highlight」を使って書くと、ハイライトされる。

highlight — ハイライトする行番号のカンマ区切りのリスト。範囲を指定することもできます。 例: 2,5-10,12

<?php
global $post;
$args = array(
    'post_type' =>'カスタム投稿タイプ名',
    'posts_per_page' => 3,
    'tax_query' => array(
        array(
            'taxonomy' => 'タクソノミー名',
            'field' => 'slug',
            'terms' => 'ターム名'
        )
    )
);

参考にした本ではhighligh_linesになっていて、効かなかった。

ソースコードをきれいに表示するプラグインといえばSyntax Highlighter

使えそうなショートコード

2013年4月出版のこの本を読んで、へーっと思ってやってみたけれど、
効かないのでなんでだろ？と思ったら、
なくなってたりするのかも。

結局、
ダッシュボード＞設定＞Syntax Highlighterの一番下を確認するのが
スマートかと。
いろいろあったけど、使えそうなのは
ハイライト位？

こんな風に「highlight」を使って書くと、ハイライトされる。

highlight — ハイライトする行番号のカンマ区切りのリスト。範囲を指定することもできます。 例: 2,5-10,12

<?php
global $post;
$args = array(
    'post_type' =>'カスタム投稿タイプ名',
    'posts_per_page' => 3,
    'tax_query' => array(
        array(
            'taxonomy' => 'タクソノミー名',
            'field' => 'slug',
            'terms' => 'ターム名'
        )
    )
);

参考にした本ではhighligh_linesになっていて、効かなかった。

つい先日、
音楽サイトに

THE EVENTS CALENDAR
を使ってカレンダーを埋め込みましたが、

All-in-One Event Calendar

今回は、

こちらの本に、他のスケジュール管理のプラグインがあったので
ガーデニングサイトに入れてみた。

All-in-One Event Calendar
からダウンロード

日本語化

All-in-One Event Calendar 日本語化。
日本語化ファイルは↑で入手。

2つの違い

ALL-IN-ONEの方がGoogle Calendarまんまという感じ。

ちゃんと個別ページも勝手にできる。

ウィジット表示機能

近い予定を自動的にウィジットに表示してくれる機能が
なかなかよいかも。

見た目を除けば、
ALL-IN-ONEの方が使いやすそう。

つい先日、
音楽サイトに

THE EVENTS CALENDAR
を使ってカレンダーを埋め込みましたが、

All-in-One Event Calendar

今回は、

こちらの本に、他のスケジュール管理のプラグインがあったので
ガーデニングサイトに入れてみた。

All-in-One Event Calendar
からダウンロード

日本語化

All-in-One Event Calendar 日本語化。
日本語化ファイルは↑で入手。

2つの違い

ALL-IN-ONEの方がGoogle Calendarまんまという感じ。

ちゃんと個別ページも勝手にできる。

ウィジット表示機能

近い予定を自動的にウィジットに表示してくれる機能が
なかなかよいかも。

見た目を除けば、
ALL-IN-ONEの方が使いやすそう。

この本から気になったプラグイン

WP slab Text
2年程更新されてないようで、
ダッシュボードで検索してもヒットせず。

WP slabText
こちらからダウンロード

「||」パイプ2本で好きなところに改行がいれられる！

有効にすることを忘れずに。

しっかりタイトルに効いていて楽しい！

注意

この設定したまま、ツイートをしようと思うと、
class設定が追加されてるものが吐出されちゃう。

なので、結局これは使えないかも・・・

どうやるんだろう？と思っていたら、この本にたまたま載っていた。

使用するプラグイン

THE EVENTS CALENDAR

カレンダー表示（月）やリスト、DAY（日）を選んで表示を切り替えることが可能。

日本語化するには

The Events Calendar 使用方法 解説！

を参考にして、管理画面を日本語化することが可能。

参考図書には、土日に色づけする方法あり。
プロ版にすると、機能がだいぶ拡張されるらしい。

<?php
global $post;
$args = array(
    'post_type' =>'カスタム投稿タイプ名',
    'posts_per_page' => 3,
	'tax_query' => array(
		array(
			'taxonomy' => 'タクソノミー名',
			'field' => 'slug',
			'terms' => 'ターム名'
		)
	)
);
$my_posts = get_posts($args);

foreach ( $my_posts as $post ) :
setup_postdata($post);
?>

<ul>
<li>
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('size60_60'); ?><?php the_title(); ?>&nbsp;<?php echo get_the_date('Y.n.j'); </a>
</li>

<?php 
	endforeach;?>
</ul>
<?php 
wp_reset_postdata(); ?>

global $post;
や
wp_reset_postdata();
あたりで躓いた。

無事表示されました。