【WordPress】アーカイブウィジェットとタグクラウドのデザインを揃える【Cocoon】

WordPress

タグクラウドのデザインはCocoonが制御しているものを流用しつつ、整形しました。色と形を綺麗にしてみただけですが、色合いやデザインが揃うだけでも結構スッキリ見えるものです!

カスタム前のアーカイブウィジェットとタグクラウド

アーカイブの月が四角く囲われているのに、タグは囲いがないので落ち着かない感じですね。

アーカイブのデザインに寄せたいので、まずは簡単にできるタグクラウドから。

タグクラウドのデザイン変更

四角く囲い、整然と並ぶスタイルにしました。しおりのマークを消すには.tag-caption .fa-tag {display: none;}が要ります。でも、わりとこのアイコン可愛いのでそのまま流用。

.widget_tag_cloud .tagcloud a{
	background-color: #E6E7EB;
	width:30%;
	border-radius:4px;
	flex: 0 1 auto;
}

.widget_tag_cloud .tagcloud a:hover{
	background:#767376!important;
	color:#FFFFFF!important;
}

アーカイブウィジェットのデザイン変更

PHPに一部書き加え、CSSも変更しました。記事数の表示が(15)とか括弧入りだったのをやめてみたりとか。

PHP

前回、前々回の記事で変更した分も含めた全文を貼っておきました。

class Widget_Archives2 extends WP_Widget {
function __construct() {
$widget_ops = array('classname' => 'widget_archives2', 'description' => 'サイトの投稿の年別/月別アーカイブ' );
parent::__construct('archives2', 'アーカイブ (年別/月別)', $widget_ops);
}
function widget( $args, $instance ) {
extract($args);
$c = ! empty( $instance['count'] ) ? '1' : '0';
$title = apply_filters('widget_title', empty($instance['title']) ? __('Archives') : $instance['title'], $instance, $this->id_base);
echo $before_widget;
if ( $title )
echo $before_title . $title . $after_title;
$this->get_archives(apply_filters('widget_archives2_args', array('show_post_count' => $c)));
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$new_instance = wp_parse_args( (array) $new_instance, array( 'title' => '', 'count' => 0) );
$instance['title'] = strip_tags($new_instance['title']);
$instance['count'] = $new_instance['count'] ? 1 : 0;
return $instance;
}
function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'count' => 0) );
$title = strip_tags($instance['title']);
$count = $instance['count'] ? 'checked="checked"' : '';
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
<p>
<input class="checkbox" type="checkbox" <?php echo $count; ?> id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" />
<label for="<?php echo $this->get_field_id('count'); ?>"><?php _e('Show post counts'); ?></label>
</p>
<?php
}
function get_archives($args = '') {
$defaults = array(
'limit' => '',
'before' => '',
'after' => '',
'show_post_count' => false,
'echo' => 1,
'order' => 'DESC',
);
$r = wp_parse_args( $args, $defaults );
extract( $r, EXTR_SKIP );
$arcresults = $this->get_monthly_archives_data($r);
$output = $this->build_html($r, $arcresults);
if ( $echo )
echo $output;
else
return $output;
}
function get_monthly_archives_data($args) {
global $wpdb;
extract( $args, EXTR_SKIP );
if ( '' != $limit ) {
$limit = absint($limit);
$limit = ' LIMIT '.$limit;
}
$order = strtoupper( $order );
if ( $order !== 'ASC' )
$order = 'DESC';
//filters
$where = apply_filters( 'getarchives2_where', "WHERE post_type = 'post' AND post_status = 'publish'", $args );
$join = apply_filters( 'getarchives2_join', '', $args );
$query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, count(ID) as posts FROM $wpdb->posts $join $where GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date $order $limit";
$key = md5($query);
$cache = wp_cache_get( 'get_archives2' , 'general');
if ( !isset( $cache[ $key ] ) ) {
$arcresults = $wpdb->get_results($query);
$cache[ $key ] = $arcresults;
wp_cache_set( 'get_archives2', $cache, 'general' );
} else {
$arcresults = $cache[ $key ];
}
return $arcresults;
}
function build_html($args, $arcresults) {
extract( $args, EXTR_SKIP );
if ( !$arcresults )
return '';
$cur_year = -1;
$afterafter = $after;
$output = '<ul class="yearArchiveList">'; // (1)
foreach ( (array) $arcresults as $arcresult ) {
if ( $cur_year != $arcresult->year ) {
if ( $cur_year > 0 ) {
$output .= "</ul>"; // (/3)
$output .= "</li>\n"; // (/2)
}
$output .= '<li><p class="year">' . $arcresult->year . "年</p>"; // (2)
$output .= '<div class="eachYearOut"><ul class="eachYear">'; // (3)
$cur_year = $arcresult->year;
}
if ( $show_post_count )
$after = " {$arcresult->posts}{$afterafter}";
$output .= '<li class="singleList">' . $this->get_archives_link($arcresult->year, $arcresult->month, $before, $after) . "</li>\n";
}
$output .= "</ul></div>"; // (/3)
$output .= "</li>\n"; // (/2)
$output .= "</ul>\n"; // (/1)
return $output;
}
function get_archives_link($year, $month, $before = '', $after = '') {
global $wp_locale;
$url = get_month_link($year, $month);
$url = esc_url($url);
$text = $wp_locale->get_month($month);
$text = wptexturize($text);
$title_text = sprintf(__('%1$s %2$d'), $wp_locale->get_month($month), $year);
$title_text = esc_attr($title_text);
$link_html = "$before<a href='$url' title='$title_text'>$text</a><span class='post-count'>$after</span>";
$link_html = apply_filters( 'get_archives2_link', $link_html );
return $link_html;
}
}
register_widget("Widget_Archives2");

前のデザインでよければこの辺はいじる必要なしです。()を省いたのと、CSSで整形するために改編しただけなので、大きな変更はありません。

CSS

アーカイブ部分のCSSを全文貼り付けておきます。年の矢印の向きをCLOSEのときは「→」OPENの時は「↓」に変更しました。

.yearArchiveList{
	padding-left: 5px;
}

.yearArchiveList li{
	list-style-type: none;
}

.yearArchiveList > li{
	border-bottom: dashed 1px #767376;
	margin-bottom: 4px;
	padding-bottom: 4px;
}

.year:before{
	font-family: "Font Awesome 5 Free";
  	content: '\f35a';
  	font-weight: 800;
	padding-right: 5px;
}

.year.open:before{
	font-family: "Font Awesome 5 Free";
  	content: '\f358';
  	font-weight: 800;
	padding-right: 5px;
}

.year {
  cursor: pointer;
}

.eachYearOut{
	display: none;
}

.eachYear{
	display: flex;
	flex-wrap: wrap;
}

.eachYear li{
	width: 31%;
	margin: 0px 4px 4px 0px ;
	flex: 0 1 auto;
	display: inline-block;
	border-radius:4px;
	background-color:#E6E7EB!important;
}

.eachYear li:hover{
	background:#767376!important;
	color:#FFFFFF!important;
}

.singleList a{
	display:block;
	float:left;
	width: 61%;
	padding:4px 5px;
	border-radius:5px;
	font-size: 14px;
	text-decoration:none; 
}

.singleList a:hover{
	background:#767376!important;
	color:#FFFFFF!important;
}

.singleList .post-count{
	display:block;
	float:right;
	width: 29%;
	padding:0px 4px;
	margin:4px 4px;
	border-radius:5px;
	font-size: 14px;
	text-align:right;
	background:#BBB0B1!important;
	color:#FFFFFF!important;
}

本当は月のエリアにカーソルが載ったら前面リンクが働く・月のカウント部分のカラーを反転させるなどなどしたかったんですが、いろいろCSSを書いてみたもののなぜかうまくいかなくて。

エリア部分にカーソルが載ったら色が変わるまではいけたので、当面はそれで我慢します。

カスタム前のアーカイブウィジェットとタグクラウド

見た目のデザインが揃いました。枠のサイズが微妙に異なるのは気にならんわけでもないですが、いったんこれはこのままで行こうかと。

月にカーソルが載ったときの挙動。

タグにカーソルが載ったときの挙動。

完璧!とは言えませんが、とりあえずなんとなく統一感はでます。

コメント

タイトルとURLをコピーしました