Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
モーダルウィンドウでメッセージを表示できるワードプレスのプラグイン
<?php
/*
Plugin Name: WP Modal Message
Version: 0.1-alpha
Description: modal window message
Author: kurozumi
Author URI: http://a-zumi.net
Plugin URI: http://a-zumi.net
Text Domain: wp-modal-message
Domain Path: /languages
*/
$wp_modal_message = new WP_Modal_Message();
$wp_modal_message->register();
class WP_Modal_Message
{
const PLUGIN_NAME = "モーダルメッセージ";
const ADMIN_TITLE = "モーダルメッセージ設定";
public function register()
{
add_action('plugins_loaded', array($this, 'plugins_loaded'));
}
public function plugins_loaded()
{
register_activation_hook(__FILE__, array($this, 'register_activation_hook'));
register_activation_hook(__FILE__, array($this, 'register_deactivation_hook'));
add_action('admin_menu', array($this, 'add_menu_page'));
add_action('admin_init', array($this, 'admin_init'));
add_action('admin_notices', array($this, 'admin_notices'));
//if (wp_is_mobile())
// return;
if(isset($_COOKIE['wp-modal-message']) && $_COOKIE['wp-modal-message'] == 'stop')
return;
add_action('wp_enqueue_scripts', array($this, 'wp_enqueue_scripts'));
add_action('wp_footer', array($this, 'wp_footer'));
}
public function register_activation_hook()
{
update_option('wp-modal-message', array(
'display' => 2,
'expires' => 1,
'title' => 'お知らせ',
'body' => 'お知らせです。'
));
}
public function register_deactivation_hook()
{
delete_option('wp-modal-message');
}
public function add_menu_page()
{
add_menu_page(
__(self::PLUGIN_NAME),
__(self::PLUGIN_NAME),
'manage_options',
__FILE__,
array($this, 'print_options_page')
);
}
public function get_option()
{
$default_option = array(
'display' => 2,
'expires' => 1,
'title' => 'お知らせ。',
'body' => 'お知らせです。'
);
if ($option = get_option('wp-modal-message'))
{
return wp_parse_args($option, $default_option);
} else
{
return $default_option;
}
}
public function print_options_page()
{
$options = $this->get_option();
?>
<div class="wrap">
<h1><?php echo esc_html(__(self::ADMIN_TITLE)); ?></h1>
<form method="post" action="">
<?php wp_nonce_field('nonce_key', 'wp-modal-message'); ?>
<table class="form-table">
<tr>
<th scope="row">
<label for="display"><?php _e('表示の有無'); ?></label>
</th>
<td>
<select name="display">
<?php foreach (array(1 => '表示', 2 => '非表示') as $key => $name) : ?>
<?php $selected = ($key == $options['display']) ? " selected" : ""; ?>
<option value="<?php echo esc_attr($key); ?>"<?php echo $selected; ?>><?php echo esc_html($name); ?></option>
<?php endforeach; ?>
</select>
</td>
</tr>
<tr>
<th scope="row">
<label for="expires"><?php _e('次回表示までの期間'); ?></label>
</th>
<td>
<input name="expires" type="number" step="1" min="1" value="<?php echo esc_attr($options['expires']); ?>" class="small-text" /> <?php _e( '日' ); ?>
</td>
</tr>
<tr>
<th scope="row">
<label for="title"><?php _e('Title'); ?></label>
</th>
<td>
<input name="title" type="text" class="regular-text" value="<?php echo esc_attr($options['title']); ?>" />
</td>
</tr>
<tr>
<th scope="row">
<label for="body"><?php _e('本文'); ?></label>
</th>
<td>
<textarea name="body" class="large-text code" rows="10"><?php echo $this->allowed_html($options['body']); ?></textarea>
</td>
</tr>
</table>
<p><input type="submit" value="<?php echo esc_attr(__('Save')); ?>" class="button button-primary button-large" /></p>
</form>
</div>
<?php
}
public function admin_init()
{
if (isset($_POST['wp-modal-message']) && $_POST['wp-modal-message'])
{
if (check_admin_referer('nonce_key', 'wp-modal-message'))
{
$e = new WP_Error();
$options = array();
if (isset($_POST['display']) && $_POST['display'])
{
$options['display'] = trim($_POST['display']);
if($_POST['display'] == 2 && isset($_COOKIE['wp-modal-message']))
setcookie("wp-modal-message", '', time() - 1800, "/");
}
if (isset($_POST['expires']) && $_POST['expires'])
{
$options['expires'] = trim($_POST['expires']);
}
if (isset($_POST['title']) && $_POST['title'])
{
$options['title'] = trim($_POST['title']);
} else
{
$options['title'] = "";
$e->add('error', __('タイトルを入力して下さい。'));
}
if (isset($_POST['body']) && $_POST['body'])
{
$options['body'] = trim($_POST['body']);
} else
{
$options['body'] = "";
$e->add('error', __('本文を入力して下さい。'));
}
update_option('wp-modal-message', $options);
set_transient('wp-modal-message', $e->get_error_messages(), 10);
wp_safe_redirect(menu_page_url(__FILE__, false));
}
}
}
public function admin_notices()
{
if ($messages = get_transient('wp-modal-message')):
?>
<div class="updated">
<ul>
<?php foreach ($messages as $message): ?>
<li><?php echo esc_html($message); ?>
<?php endforeach; ?>
</ul>
</div>
<?php
endif;
}
public function wp_enqueue_scripts()
{
wp_enqueue_style('backbone.modal', '//cdnjs.cloudflare.com/ajax/libs/backbone.modal/1.1.5/backbone.modal-min.css');
wp_enqueue_style('backbone.modal-theme', '//cdnjs.cloudflare.com/ajax/libs/backbone.modal/1.1.5/backbone.modal.theme-min.css');
wp_enqueue_script('underscore');
wp_enqueue_script('backbone');
wp_enqueue_script('backbone.modal', '//cdnjs.cloudflare.com/ajax/libs/backbone.modal/1.1.5/backbone.modal-min.js', array('jquery'), false, true);
wp_enqueue_script('js-cookie', '//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.3/js.cookie.js');
}
public function wp_footer()
{
$options = $this->get_option();
if ($options['display'] == 2)
return;
?>
<div class="app"></div>
<script type="text/template" id="modal-template">
<div class="bbm-modal__topbar">
<h3 class="bbm-modal__title"><?php echo esc_html($options['title']);?></h3>
</div>
<div class="bbm-modal__section">
<?php echo $this->allowed_html($options['body']);?>
</div>
<div class="bbm-modal__bottombar">
<a href="#" class="bbm-button">close</a>
</div>
</script>
<script>
jQuery(function ($) {
var Modal = Backbone.Modal.extend({
template: _.template($('#modal-template').html()),
cancelEl: '.bbm-button',
onDestroy: function(){
Cookies.set('wp-modal-message', 'stop', { expires: 1 });
}
});
$(document).ready(function () {
var modalView = new Modal();
$('.app').html(modalView.render().el);
});
});
</script>
<?php
}
public function allowed_html($text)
{
$allowed_html = array_merge(wp_kses_allowed_html('post'), array(
'iframe' => array(
'width' => array(),
'height' => array(),
'src' => array(),
'frameborder' => array(),
'allowfullscreen' => array()
)
));
return wp_kses($text, $allowed_html);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment