WordPress カレンダー カスタマイズ

公開日: : CSS, PHP, WordPress

WordPress カレンダー カスタマイズ

WordPressでカレンダーの表示部分をいじってみようかと思います。

どうやら、カレンダー関数の名前は get_calendar みたいで、
以下のファイルにありました。
wordpress/wp-includes/general-template.php

この記事は WordPress 本体を変更するやり方であまりよくないので、以下の記事の方を先に読んでください。
関連記事:WordPress カレンダー カスタマイズ(add_filter版)

WordPress カレンダーの曜日を英語にする

STINGER3 でデフォルトでカレンダーを出すとこんな感じです。
calender0

まず、曜日を英語にし、センター揃えにしてみます。

wordpress/wp-includes/locale.php ファイルの中の、
109行辺り

__('S_Sunday_initial');
__('M_Monday_initial');
__('T_Tuesday_initial');
__('W_Wednesday_initial');
__('T_Thursday_initial');
__('F_Friday_initial');

__( ); を取っても可能ですが、他でも使われているかもしれなので、
今回はgeneral-template.phpの中で表示直前で力ずくで、変換しようと思います。

general-template.php
1475行あたり

$day_name = (true == $initial) ? $wp_locale->get_weekday_initial($wd) : $wp_locale->get_weekday_abbrev($wd);


この下に以下を入れます。

if($day_name=='日')$day_name='Sun';
if($day_name=='月')$day_name='Mon';
if($day_name=='火')$day_name='Tue';
if($day_name=='水')$day_name='Wed';
if($day_name=='木')$day_name='Thu';
if($day_name=='金')$day_name='Fri';
if($day_name=='土')$day_name='Sat';


あとはstyle.cssで調整します。

#wp-calendar th {
	text-align: center;
	padding: 0px; font-size: x-small;
}

WordPress キャプションの”月”を消す

”7月2014” の ”月” 部分も力ずくで消してみようと思います。

general-template.php
1462行あたり

$calendar_caption = _x('%1$s %2$s', 'calendar caption');


以下のコードに変更

$calendar_caption = '%2$s'.$thismonth;

captionタグ はスマホなどでborderがずれるので thタグ に変更します。
1463行あたり

$calendar_output = '<table id="wp-calendar">
	<caption>' . sprintf($calendar_caption, $wp_locale->get_month($thismonth), date('Y', $unixmonth)) . '</caption>
	<thead>
	<tr>';


以下のコードに変更

$calendar_output = '<table id="wp-calendar">
	<thead>
	<tr><th id="calendar-caption" colspan="7">' . sprintf($calendar_caption, $wp_locale->get_month($thismonth), date('Y', $unixmonth)) . '</th></tr>
	<tr>';

WordPress 前の月(prev)と次の月(next)を上に持ってくる

カレンダーの表示はテーブルになっているので、テーブルから外に出して、
新しく作った

<div id="wp-calendar-pn"> </div>

の中に入れて、
floatさせて上に持ってこようと思います。

カレンダーの表示は、
calendar_output 変数にどんどんputしている感じなので、
calendar_output2 変数を作ってそこにとりあえず入れておきます。

general-template.php
1487行あたりの以下の部分をコメントアウトして、

if ( $previous ) {
        ( ・・・・省略 ・・・・ ) 
	<tbody>
	<tr>';


以下のコードに変更

if( $previous || $next)$calendar_output2 = "\n\t".'<div id="wp-calendar-pn">';
	if ( $previous ) {
		$calendar_output2 .= "\n\t\t".'<a id="prev" href="' . get_month_link($previous->year, $previous->month) . '" title="' . esc_attr( sprintf(__('View posts for %1$s %2$s'), $wp_locale->get_month($previous->month), date('Y', mktime(0, 0 , 0, $previous->month, 1, $previous->year)))) . '">&laquo;</a>';
	} 

if ( $next ) {
		$calendar_output2 .= "\n\t\t".'<a id="next" href="' . get_month_link($next->year, $next->month) . '" title="' . esc_attr( sprintf(__('View posts for %1$s %2$s'), $wp_locale->get_month($next->month), date('Y', mktime(0, 0 , 0, $next->month, 1, $next->year))) ) . '">&raquo;</a>';
	} 
	if( $previous || $next)$calendar_output2 .= "\n\t".'</div>'."\n";

general-template.php
1578行あたり

$calendar_output .= "\n\t</tr>\n\t</tbody>\n\t</table>";

の下に、以下のコードを足します。

$calendar_output .= $calendar_output2;

style.cssのカレンダーの部分に以下を足します。

#calendar_wrap{
position:relative;
}
#wp-calendar-pn{
width: 248px;margin-left: 35px;
position:absolute;top:0;left:0;
}
#prev{ float:left;margin-left:20px;}
#next{ float:right;margin-right:20px;}

WordPress 空のセルに星マーク(★)を表示したい

今の表示はこんな感じです。
calender1
日にちのセルで colspan されてる部分は分割し、テキストの星マーク(★)を入れようと思います。

general-template.php
1550行あたり

if ( 0 != $pad )
$calendar_output .= "\n\t\t".'<td colspan="'. esc_attr($pad) .'" class="pad">&nbsp;</td>';

↓ 以下に変更

if ( 0 != $pad ){
	for ( $i = 0; $i < $pad; $i++ )
	$calendar_output .= "\n\t\t".'<td class="pad">★</td>';
}

1575行あたり

if ( $pad != 0 && $pad != 7 )
		$calendar_output .= "\n\t\t".'<td class="pad" colspan="'. esc_attr($pad) .'">&nbsp;</td>';

↓ 以下に変更

if ( $pad != 0 && $pad != 7 ){
	for ( $i = 0; $i < $pad; $i++ )
		$calendar_output .= "\n\t\t".'<td class="pad">★</td>';
}
$calendar_output .= "\n\t</tr>\n\t</tbody>\n\t</table>";

あとはCSSでpadクラスを調整します。

結果 style.css のカレンダー部分は以下になります。
style.css(カレンダーの部分)

/*-----------------------------------
カレンダー
------------------------------------*/
#wp-calendar {
	border-collapse: collapse;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	width: 250px;
	margin-left: 35px;
}
#wp-calendar thead tr th {
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #999;
	border-left-color: #999;
}
#wp-calendar th {
	text-align: center;
	padding: 0px; font-size: x-small;
}
#wp-calendar td {
	text-align: center;
	padding: 0px;
}
#wp-calendar #calendar-caption {
	font-weight: bold;
	text-align: center;
	font-size: small;
}
#calendar_wrap a{text-decoration:none; color:#CCC;}
#wp-calendar #today {
	background-color: #CCC;
}
#wp-calendar #today a{
	color:#fff;
}
#calendar_wrap{
position:relative;
}

#wp-calendar-pn{
width: 250px;margin-left: 35px;
position:absolute;top:0;left:0;
}
#prev{ float:left;
margin-left:20px;
}
#next{ float:right;margin-right:20px;}
#wp-calendar .pad{ color:#FFCCFF; font-size: x-small;}

参考に general-template.php ファイルとスマホのCSSも
アップしておきますので、よかったらどうぞ。
general-template.php (ZIP ダウンロード)

スマートフォン用の CSS はこちら↓
smart.css(カレンダーの部分)

/*-----------------------------------
カレンダー
------------------------------------*/
#wp-calendar {
	border-collapse: collapse;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	width: 100%;
	margin-top:20px;
}
#wp-calendar thead tr th {
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #999;
	border-left-color: #999;
}
#wp-calendar td {
	text-align: center;
	padding: 5px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #999;
	border-left-color: #999;
}
#wp-calendar #calendar-caption {
	font-weight: bold;
	text-align: center;
	font-size: small;
}
#calendar_wrap a{text-decoration:none; color:#CCC;}
#wp-calendar #today {
	background-color: #CCC;
}
#wp-calendar #today a{
	color:#fff;
}
#calendar_wrap{
position:relative;
}

#wp-calendar-pn{
width: 100%;position:absolute;top:0;left:0;
}
#prev{ float:left;margin-left:20px;}
#next{ float:right;margin-right:20px;}
#wp-calendar .pad{ color:#FFCCFF; font-size: x-small;}

関連記事

WordPress プラグイン「 Search Everything 」

WordPressでカテゴリー名も検索にひっかけるプラグイン「Search Everything」

WordPressでカテゴリーも検索にひっかけるプラグイン「Search Everything 8.

記事を読む

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

Google Earth が出来た時も、Google ストリートビューが出来た時も、 Google

記事を読む

WordPress Twenty Seventeen function.php

WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテンプレートには不要ですが、よくわ

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

WordPress レスポンシブ テンプレート

WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

記事を読む

リビジョンを削除し、テーブルを最適化してDBの容量を削減

WordPress リビジョンを削除し、テーブルを最適化してDBの容量を削減

WordPress リビジョン機能 リビジョンは過去の記事を保存してくれる WordPress の

記事を読む

WordPress レスポンシブ テンプレート 元にサイトを作ってみる その1

「レスポンシブ テンプレート の メニューやブログの設置」の記事では、メニューやブログの設置例をやっ

記事を読む

CSS セレクタ

【CSS セレクタ】その2:擬似クラスセレクタやラジオボタンチェックでフォームの有効無効や枠の色変えたいとか

<今回のピックアップ項目> :link :visited :hover :active :t

記事を読む

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。 今回は細かいところや注意点とエラーなど

記事を読む

レンタルサーバでWordPressを設置してみよう!

WordPress.com 内に、ブラウザだけで無料でサイトを作成出来きるサービスもありますが、Wo

記事を読む

CSS PHP WordPress

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

リビジョンを削除し、テーブルを最適化してDBの容量を削減
WordPress リビジョンを削除し、テーブルを最適化してDBの容量を削減

WordPress リビジョン機能 リビジョンは過去の記事を保存して

Javascript let const アロー関数 クラス
Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)

ESとはECMASCriptの略で、ECMA という国際的な標準化機関

Strict モード JavaScript
Javascript Strictモード “use strict”;

Strict モード(厳格モード) Strict モードとは、ECM

CodeIgniter インストール
Codeigniter インストールとバージョンアップ2→3 PHP 5→7 メモ

Codeigniter インストール Codeigniter をサイ

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

→もっと見る

    • 202102
      Mon Tue Wed Thu Fri Sat Sun
      1234567
      891011121314
      15161718192021
      22232425262728
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑