ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作

プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラグインはバリバリ使いますけどね。
しかも拡張機能とか使います。(買って損はないと思います!!!)

作りたいもの

35bd28cae410fe56d3d8b5a794ac0975
a

  • 入力欄は少なく。
  • 午前と午後の入力ができる
  • 毎日に営業時間が入力できる
  • できたら表のカレンダーのほうが見やすい
  • カレンダーなので日数も増減できるように
  • ひとつの管理画面で変更したい
  • 全部一覧になって確認したい

使うもの

Advanced Custom Fields
拡張プラグイン ACF | Repeater Field

このふたつだけです!
あとはカスタム投稿を作成する CPT UIとかあってもいいかもしれません。

ソースコード

 $paged ,
'post__in' => array(341),//特定の記事(カレンダー入力ページ)だけを呼び出し
'posts_per_page' => 1
) ); ?>

have_posts() ):  while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

カレンダー

0 ) { echo '
'; $n -= 1; }; ?>

()

定休日

かなり端折りましたがこんな感じ

カスタムフィールドは

  • 今月…テキスト
  • 1日の曜日
  • カレンダー ※リピートグループ
    • 日付
    • 午前
    • 午後
    • 定休日

です。(フィールドIDは英数字に直すことをおすすめします)
bc26f5a31753cf05801e5cc4e3e1801b


‘post__in’ => array(341),

これで特定の記事に設定しているカスタムフィールドの値をループで抜き出せるようにします。

$tuitachi = get_field(‘1日の曜日’);
switch ($tuitachi) {

これは、表で組んだときに1日の開始位置をあわせるためのものです。
必要に応じてグレーの枠がでます。

CSS

忘れてはいけないCSS。これがないと全部縦並びに出力されておわりです。

.schedule_calendar {font-size:0px;margin:0 auto;width:980px;margin:0 auto;}
.schedule_calendar .date {
	display:inline-block;
	vertical-align:top;
	width:14%;
	border:1px solid #000;
	margin-top:-1px;
	margin-right:-1px;
	height:110px;
	font-size:13px;
	background-color:#fff;
}
.schedule_calendar .date.youbi {
	height:3em;
	text-align:center;
	line-height:3em;
	background-color:#0986C9;
	color:#fff;
	font-weight:bold;
}
.schedule_calendar .date.brank {background-color:#ccc;}
.schedule_calendar p {
	margin-bottom:0px;
	padding:0px 10px;
}
.schedule_calendar p.ttl {
	border-bottom:1px dotted #666;
	color:#0986C9;
	font-size:15px;
	padding:5px 10px;
	margin-bottom:15px;
	font-weight:bold;
}
.kyushin {line-height:3.0em;}

なんだかんだいってリセットCSSとかbox-sizingの影響が出てくると思いますので、各自調節をお願いします。
dateを7分割したサイズにしてインラインブロックで横並びにしています。(min-heightに注意)
ループ出力したものをインラインブロックで縦並びにすると、レスポンシブにしたときに
インラインブロック→ブロックに変更するだけで縦型カレンダーに変更することもできるので便利!

表なのにテーブルを使わないのは、単にループ出力の合間にTRタグをいれるのが面倒だったからですね。

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

a

201710/24

プラグインを使わない絞り込み機能【未選択時はすべて表示したい】

Wordpressの検索機能について チェックボックスに1つもチェックをいれなかったら 絞り込まずに全部表示。 「絞り込みの入…

av

Welcartのカテゴリー管理・新規登録ページをカスタマイズする

ECサイトをWordpressで運用するときに使われる『Welcart』というプラグイン。 私はこのプラグインが使いにくくて仕方がないです…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

bsfvgs1s

201610/6

WordPressの記事・固定ページを親ごとに出力する。

投稿・カスタム投稿・固定ページのループ出力について WordPressではquery_postsやWP_Queryなどのループを使うとペー…

ページ上部へ戻る