Welcartの営業日カレンダーをカスタマイズする

Posted on by Eternal-tears
Sponsored Link

実は営業日カレンダーをカスタマイズしたかったのです。
今月と来月のカレンダーをそれぞれdivで囲みたかったからです。

Sponsored Link


それと、営業日カレンダーに１つ問題があって、
WordPressのデフォルトのカレンダーを応用しているので、
id=”wp-calendar”が重複してしまいます。
デフォルトのカレンダーとWelcart カレンダーとWelcart Blog Calendar(サイトの投稿のカレンダー（商品以外)の３つを表示させると、idが４つ重複してしまいます。

今回は営業日カレンダーをカスタマイズするついでに、
このid重複も直します。

営業日カレンダーのソースを利用して、
Welcart2 カレンダーWidgetを作ります。
ソースはusc-e-shop/widgets/usces_calendar.phpファイルにあります。
下記のソースを自作テーマ内のfunction.phpに記載します。
修正点は下記の通り、関数名などの語尾に２を付け足して置換しています。

Welcart_calendar　→　Welcart_calendar2
Welcart　→　Welcart2
usces_the_calendar　→　usces_the_calendar2

include (USCES_PLUGIN_DIR . '/includes/widget_calendar.php');

↓

include (get_stylesheet_directory() . '/includes/widget_calendar2.php');

修正後のfunction.phpに記載したソース

/**
 * Welcart_calendar Class
 */

class Welcart_calendar2 extends WP_Widget{
    /** constructor */
    function Welcart_calendar2() {
        parent::WP_Widget(false, $name = 'Welcart2 '.__('Calendar', 'usces'));	
    }

    /** @see WP_Widget::widget */
    function widget($args, $instance) {		
        extract( $args );
        $title = $instance['title'] == '' ? 'Welcart2 '.__('Business Calendar', 'usces') : $instance['title'];
        $icon = $instance['icon'] == '' ? 1 : (int)$instance['icon'];
		//if($icon == 1) $before_title = '<div class="widget_title"><img src="' . USCES_PLUGIN_URL . '/images/calendar.png" alt="' . $title . '" width="24" height="24" />';
		$img_path = file_exists(get_stylesheet_directory().'/images/calendar.png') ? get_stylesheet_directory_uri().'/images/calendar.png' : USCES_FRONT_PLUGIN_URL . '/images/calendar.png';
		if($icon == 1) $before_title .= '<img src="' . $img_path . '" alt="' . $title . '" />';
        ?>
              <?php echo $before_widget; ?>
                  <?php echo $before_title
                      . esc_html($title)
                      . $after_title; ?>
					  
		<?php usces_the_calendar2(); ?>

              <?php echo $after_widget; ?>
        <?php
    }

    /** @see WP_Widget::update */
    function update($new_instance, $old_instance) {				
        return $new_instance;
    }

    /** @see WP_Widget::form */
    function form($instance) {				
        $title = $instance&#91;'title'&#93; == '' ? 'Welcart2 '.__('Business Calendar', 'usces') : esc_attr($instance&#91;'title'&#93;);
		$icon = $instance&#91;'icon'&#93; == '' ? 1 : (int)$instance&#91;'icon'&#93;;
        ?>
            <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label></p>
			<p><label for="<?php echo $this->get_field_id('icon'); ?>"><?php _e('display of icon', 'usces'); ?>: <select class="widefat" id="<?php echo $this->get_field_id('icon'); ?>" name="<?php echo $this->get_field_name('icon'); ?>"><option value="1"<?php if($icon == 1){echo ' selected="selected"';} ?>><?php _e('Indication', 'usces'); ?></option><option value="2"<?php if($icon == 2){echo ' selected="selected"';} ?>><?php _e('Non-indication', 'usces'); ?></option></select></label></p>
			<p><?php _e("The setting of the business day, In a 'business day setting' page of the admin screen.", 'usces'); ?></p>
        <?php 
    }

}
add_action('widgets_init', create_function('', 'return register_widget("Welcart_calendar2");'));

function usces_the_calendar2() {
	global $usces;
	include (get_stylesheet_directory() . '/includes/widget_calendar2.php'); 
}&#91;/php&#93;

<h3>修正前のusces_calendar.phpファイルのソース</h3>
<?php

/**
 * Welcart_calendar Class
 */
class Welcart_calendar extends WP_Widget {
    /** constructor */
    function Welcart_calendar() {
        parent::WP_Widget(false, $name = 'Welcart '.__('Calendar', 'usces'));	
    }

    /** @see WP_Widget::widget */
    function widget($args, $instance) {		
        extract( $args );
        $title = $instance&#91;'title'&#93; == '' ? 'Welcart '.__('Business Calendar', 'usces') : $instance&#91;'title'&#93;;
        $icon = $instance&#91;'icon'&#93; == '' ? 1 : (int)$instance&#91;'icon'&#93;;
		//if($icon == 1) $before_title = '<div class="widget_title"><img src="' . USCES_PLUGIN_URL . '/images/calendar.png" alt="' . $title . '" width="24" height="24" />';
		$img_path = file_exists(get_stylesheet_directory().'/images/calendar.png') ? get_stylesheet_directory_uri().'/images/calendar.png' : USCES_FRONT_PLUGIN_URL . '/images/calendar.png';
		if($icon == 1) $before_title .= '<img src="' . $img_path . '" alt="' . $title . '" />';
        ?>
              <?php echo $before_widget; ?>
                  <?php echo $before_title
                      . wp_specialchars($title)
                      . $after_title; ?>
					  
		<ul class="ucart_calendar_body ucart_widget_body"><li>
		<?php usces_the_calendar(); ?>
		</li></ul>
				  
              <?php echo $after_widget; ?>
        <?php
    }

    /** @see WP_Widget::update */
    function update($new_instance, $old_instance) {				
        return $new_instance;
    }

    /** @see WP_Widget::form */
    function form($instance) {				
        $title = $instance&#91;'title'&#93; == '' ? 'Welcart '.__('Business Calendar', 'usces') : esc_attr($instance&#91;'title'&#93;);
		$icon = $instance&#91;'icon'&#93; == '' ? 1 : (int)$instance&#91;'icon'&#93;;
        ?>
            <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label></p>
			<p><label for="<?php echo $this->get_field_id('icon'); ?>"><?php _e('display of icon', 'usces'); ?>: <select class="widefat" id="<?php echo $this->get_field_id('icon'); ?>" name="<?php echo $this->get_field_name('icon'); ?>"><option value="1"<?php if($icon == 1){echo ' selected="selected"';} ?>><?php _e('Indication', 'usces'); ?></option><option value="2"<?php if($icon == 2){echo ' selected="selected"';} ?>><?php _e('Non-indication', 'usces'); ?></option></select></label></p>
			<p><?php _e("The setting of the business day, In a 'business day setting' page of the admin screen.", 'usces'); ?></p>
        <?php 
    }

}
?>

ここで、divで囲むカスタマイズをするので、
usc-e-shop/includes/widget_calendar.phpをコピーして、
自作テーマ内にincludesフォルダを作成し、widget_calendar2.phpとリネームします。

usces_the_calendar2関数で、
自作テーマ内のwidget_calendar2.phpが呼び出されるように、

	include (get_stylesheet_directory() . '/includes/widget_calendar2.php');

と記述しているのはそのためです。

widget_calendar2.phpファイルでは、
重複するid=”wp-calendar”を削除し、
今月のカレンダーを

で囲み、
来月のカレンダーを

で囲んでいます。

<?php
require_once(USCES_PLUGIN_DIR . '/classes/calendar.class.php');

//cur
list($todayyy, $todaymm, $todaydd) = getToday();
$cal1 = new calendarData();
$cal1->setToday($todayyy, $todaymm, $todaydd);
$cal1->setCalendarData();
//next
list($nextyy, $nextmm, $nextdd) = getAfterMonth($todayyy, $todaymm, 1, 1);
$cal2 = new calendarData();
$cal2->setToday($nextyy, $nextmm, $nextdd);
$cal2->setCalendarData();
$caption1 = __('This month', 'usces') . '(' . sprintf(__('%2$s/%1$s', 'usces'),$todayyy,$todaymm) . ')';
$caption2 = __('Next month', 'usces') . '(' . sprintf(__('%2$s/%1$s', 'usces'),$nextyy,$nextmm) . ')';
?>
<div class="tmonth">
<table cellspacing="0" class="usces_calendar">
<caption><?php echo apply_filters( 'usces_filter_calendar_widget_cap1', $caption1, $todayyy, $todaymm); ?></caption>
<thead>
	<tr>
		<th><?php _e('Sun', 'usces'); ?></th>
		<th><?php _e('Mon', 'usces'); ?></th>
		<th><?php _e('Tue', 'usces'); ?></th>
		<th><?php _e('Wed', 'usces'); ?></th>
		<th><?php _e('Thu', 'usces'); ?></th>
		<th><?php _e('Fri', 'usces'); ?></th>
		<th><?php _e('Sat', 'usces'); ?></th>
	</tr>
</thead>
<tbody>
<?php for ($i = 0; $i < $cal1->getRow(); $i++) : ?>
	<tr>
<?php for ($d = 0; $d <= 6; $d++) : 
	$mday = $cal1->getDateText($i, $d);
	if ($mday != "") {
		$business = $usces->options['business_days'][$todayyy][$todaymm][$mday];
		//$style = ($business == 1) ? "" : ' style="background-color:#FFECCE; color:#ff0000;"';
		if($mday == $todaydd){
			$tostyle = 'businesstoday';
		}else{
			$tostyle = '';
		}
		if($business == 0){
			$style = 'businessday ';
		}else{
			$style = '';
		}
?>
		<td class="<?php echo $style . $tostyle; ?>"><?php echo $mday; ?></td>
<?php } else { ?>
		<td>&amp;nbsp;</td>
<?php } ?>
<?php endfor; ?>
	</tr>
<?php endfor; ?>
</tbody>
</table>
</div>

<div class="nmonth">
<table cellspacing="0" class="usces_calendar">
<caption><?php echo apply_filters( 'usces_filter_calendar_widget_cap2', $caption2, $nextyy, $nextmm); ?></caption>
<thead>
	<tr>
		<th><?php _e('Sun', 'usces'); ?></th>
		<th><?php _e('Mon', 'usces'); ?></th>
		<th><?php _e('Tue', 'usces'); ?></th>
		<th><?php _e('Wed', 'usces'); ?></th>
		<th><?php _e('Thu', 'usces'); ?></th>
		<th><?php _e('Fri', 'usces'); ?></th>
		<th><?php _e('Sat', 'usces'); ?></th>
	</tr>
</thead>
<tbody>
<?php for ($i = 0; $i < $cal2->getRow(); $i++) : ?>
	<tr>
<?php for ($d = 0; $d <= 6; $d++) : 
	$mday = $cal2->getDateText($i, $d);
	if ($mday != "") {
		$business = $usces->options['business_days'][$nextyy][$nextmm][$mday];
		//$style = ($business == 1) ? "" : ' style="background-color:#FFECCE; color:#ff0000;"';
		$style = ($business == 1) ? "" : ' class="businessday"'; ?>
		<td<?php echo $style; ?>><?php echo $mday; ?></td>
<?php } else { ?>
		<td>&amp;nbsp;</td>
<?php } ?>
<?php endfor; ?>
	</tr>
<?php endfor; ?>
</tbody>
</table>
</div>
<?php
$afterword = '(<span class="business_days_exp_box businessday">&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span>&amp;nbsp;&amp;nbsp;' . __('Holiday for Shipping Operations', 'usces') . ')'."\n";
echo apply_filters( 'usces_filter_widget_calendar', $afterword);
?>

これでカスタマイズした営業日カレンダーが出来ました。

営業日カレンダーをカスタマイズした表示例

Welcartの営業日カレンダーをカスタマイズした表示例

Sponsored Link