ファイル添付ボタンのカスタマイズ（wordpress / mwwpform）
タイトル通り。
Wordpressで使用しているフォームプラグイン MW WP FORMのファイル添付ボタンをカスタマイズする。
chromeとedgeでデザインが異なること、またレスポンシブを考えての変更。
1.HTML
<dt>画像</dt> <dd><label for="file_upload" class="fileup_label"><span class="fileup_btn">ファイルを選択</span></label>[mwform_image name="画像" id="file_upload"]<span id="fileup_name"></span></dd>
2.CSS
form {
label.fileup_label {
& + input[type="file"] {
display: none;
}
}
}fileup_btnのボタンデザインは適当に。
3.JS
jQuery(function($) {
$(document).on('change', '#file_upload', function(){
var file = $(this).prop('files')[0];
$('#fileup_name').text(file.name);
});
$('.mwform-file-delete').click(function() {
$('#fileup_name').text("");
});
});試行錯誤したので余分な記述が多い気がする。
あとで要調整。
youtube動画をレスポンシブで埋め込む場合
参考サイト
design.webclips.jp
基本的にiframeを縦横比をアスペクト比に合わせたボックスで囲う、という形。
CSSでiframeのwidthとheightをボックスに合わせて100%にするので、問題ない。
<style>
.video_wrap {
width: 100%;
height: 56.25vw;
position: relative;
}
.video_wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video_wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/KBAyxbTZN5Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>カスタマイズとしてjavascriptで制御するパターン。
埋め込みたい動画のアスペクト比が2.39:1だかなんだかで、もともと動画の上下に黒帯がついていた。
それをなんとか切り捨てたいので工夫してみた。
参考サイト
techmemo.biz
やり方としては
・2.39:1のボックスを用意
・position:absoluteで16:9のボックスを中に作る（当然はみ出す）
・なので、上に2.39:1との高さの違いを2で割った高さ（黒帯の高さ）をネガティブマージンにする
・動画呼び出しのボックスの高さを16:9で設定する
最後のボックスの高さを16:9に合わせないと、youtubeの動画が自動で縮小されるぽいので。
問題は、これだと動画の再生が背景扱いになる（z-indexがマイナス）なので、一時停止や再生などができない。要検討。
.video_wrap {
width: 100%;
height: 42.55vw;
position: relative;
}
.video_in {
width: 100%;
height: 56.25vw;
position: absolute;
margin-top: calc(-1 * (56.25vw - 42.55vw) / 2);
}
#video_content {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 56.25vw;
z-index: -1;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// YouTube Player APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// プレイヤーを埋め込む場所(IDを指定)
var ytArea = 'video_content';
// 埋め込むYouTube動画のID
var ytID = 'Luf-oPvbIxk'; // https://youtu.be/〇〇〇の〇〇〇
// プレイヤーの埋め込み
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(ytArea, {
videoId: ytID,
playerVars: {
rel: 0, // 関連動画の非表示
controls: 0, // プレイヤーコントロールの非表示
showinfo: 0, // タイトルなどの非表示
modestbranding: 1, // YouTubeロゴの非表示
iv_load_policy: 3, // アノテーションの非表示
wmode: 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 動画の準備完了後の動作
function onPlayerReady(e) {
ytPlayer.playVideo();
ytPlayer.setPlaybackQuality('default'); // 画質(small・medium・large・hd720・hd1080・highres・default)
}
// 動画再生中と再生後の動作
function onPlayerStateChange(e) {
var ytStatus = e.target.getPlayerState();
if (ytStatus == YT.PlayerState.PLAYING) { //再生中
}
if (ytStatus == YT.PlayerState.ENDED) { //再生後
ytPlayer.playVideo();
}
}
</script>
<div class="video_wrap">
<div class="video_in">
<div id="video_content"></div>
</div>
</div>
サイドメニューのアーカイブウィジェットをカスタマイズする
参考→
ウィジェットで表示される月別アーカイブを年別、年まとめ表示に変更する方法 | - WP topics -
とはいえ、サイドメニューの幅はそんなにないし、縦に長くなると意味がないので、アコーディオンにした。
基本テーマがhabakiriでbootstrap使用なので、アコーディオンはbootstrapのをそのまま使うことに。
1.下準備
スムーススクロールを使っている場合、開閉ボタンのリンク先がID指定だと動かない。
なので、スムーススクロールのjsファイルにちょっと例外をくっつける。
jQuery(function($) {
var headerHight = $(".header").outerHeight() + 10;
$('a[href^="#"]').not('a.nav-link').not('a.notscroll').click(function(){
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-headerHight;
$("html, body").animate({scrollTop:position}, 550, "swing");
return false;
});
});2.inc/class.widget_archives2.phpを作成
<?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><a class="yearArc-btn notscroll" data-toggle="collapse" href="#year' . $arcresult->year . '-child">' . $arcresult->year . "年</span>"; // (2)
$output .= '<ul class="eachYear collapse" id="year' . $arcresult->year . '-child">'; // (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>"; // (/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>$after";
$link_html = apply_filters( 'get_archives2_link', $link_html );
return $link_html;
}
}
?>3.functions.phpにclassの呼び出しを追加
require_once get_stylesheet_directory() . '/inc/class.widget_archives2.php';
// 年月別アーカイブウィジェットを作成する
register_widget("Widget_Archives2");4.管理画面の外観→ウィジェットで、年月別アーカイブウィジェットを追加する
5.リスト部分のスタイルシートは適宜調整
以上。
参考元ではclassをfunctions.phpに書いてましたが、個人的にfunctions.phpが長くなると可読性が落ちてメンテが面倒くさくなるので、どうせだからincディレクトリに分離させた。
ウィジェットから特定のカテゴリを除外する
BASIC認証をかけたのに、サイドメニューの最近の投稿ウィジェットやカテゴリウィジェットで存在が見えるのはどうよ問題が発生したので、ちょっと対処。
面倒くさかったので、わりと力業だけど、表示されなければ良いと割り切った。
functions.phpに追記。
// ウィジェットのカテゴリから特定のカテゴリ(ID:1)を除外する
function my_widget_categories( $args ){
$exclude = '1'; // Exclude Category ID
if(is_category('1') || in_category('1')){
$args['include'] = $exclude;
} else {
$args['exclude'] = $exclude;
}
return $args;
}
add_filter( 'widget_categories_args', 'my_widget_categories');
//ウィジェットの最近の投稿から特定のカテゴリ(ID:1)を除外する
function my_widget_posts_args( $args ) {
if(is_category('1') || in_category('1')) {
$args['cat'] = '1';
} else {
$args['cat'] = '-1';
}
return $args;
}
add_filter( 'widget_posts_args', 'my_widget_posts_args' );カテゴリのほうはまだ変数処理する余裕があるけど、最近のほうはもはやIDを直にぶちこむ始末。
特定のカテゴリのみBASIC認証をかける
参考はこちら→https://smileworks.biz/tips/wp_php/2448
1.functions.phpに以下の記述を追記する。
function basic_auth($auth_list,$realm="Restricted Area",$failed_text="認証に失敗しました"){
if (isset($_SERVER['PHP_AUTH_USER']) and isset($auth_list[$_SERVER['PHP_AUTH_USER']])){
if ($auth_list[$_SERVER['PHP_AUTH_USER']] == $_SERVER['PHP_AUTH_PW']){
return $_SERVER['PHP_AUTH_USER'];
}
}
header('WWW-Authenticate: Basic realm="'.$realm.'"');
header('HTTP/1.0 401 Unauthorized');
header('Content-type: text/html; charset='.mb_internal_encoding());
die($failed_text);
}2.header.phpに表示実行部を追記
<?php
if(!is_home()):
if(is_category('1') || in_category('1') || is_page('2')):
$userArray = array("AAAA" => "XXXX"
);
basic_auth($userArray);
endif;
endif;
?>3.何度もログイン表示が出るようであれば、.htaccessに追記
RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]ちなみに実装時はis_categoryが「カテゴリページ」だと気づかず、カテゴリに属する記事と勘違いした為、迷走しました。
カテゴリに属する記事の場合はin_category、覚えた。
affingerでビジュアルエディタにタグを追加した場合（追記）
tinymce回りのキャッシュがかなり強力なようで、反映したりしなかったりで面倒くさい。記述がミスってるのかキャッシュの問題なのか分からないし。
ということで、キャッシュクリアのためにfunctions.phpに以下記述を追加した。
function extend_tiny_mce_before_init( $mce_init ) {
$mce_init['cache_suffix'] = 'v='.time();
return $mce_init;
}
add_filter( 'tiny_mce_before_init', 'extend_tiny_mce_before_init' );これでタグ周りがきちんと反映されて、確認が楽になった。
affingerで、ビジュアルエディタにタグを追加する
affingerでは基本機能としてビジュアルエディタにタグが設置されている。ボタンを押せば（あるいはセレクトボックスから選択すれば）、指定のタグが編集画面に入力されるという優れもの。
現在、ボタンとして表示されているのは「ADs」「SC」「ボタンA」「ボタンB」「会話A」「会話B」「会話C」「ブログカード」「Youtube」「タグID」「タグSlug」。
ここに新しく独自のタグを追加したい。
まず子テーマのjsディレクトリにtinymce-st-plugin.jsをコピーする。内容は整形すると以下になる。
(function(x,w,E,q){
var u;
function D(a){
var b=a.selection.getRng();
return Math.abs(b.endOffset-b.startOffset)>0
}
function C(a,i,f){
var d=D(a);
var j;
var g;
var b;
var h;
var c;
var e;
j=d?a.selection.getContent({format:"text"}):"";
g=i+j+f;
a.execCommand("mceInsertContent",false,g);
if(d){
return
}
b=a.selection.getRng();
h=f.length-(f.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g)||[]).length;
c=b.endOffset-h;
e=b.startContainer;
b.setStart(e,c);
b.setEnd(e,c);
a.selection.setRng(b)
}
function y(c,f,e){
var a="";
var d;
if(D(c)){
var b=c.selection.getNode();
a=c.selection.getContent();
a=(a===b.innerHTML)?b.outerHTML:a
}
d=f+a+e;
c.execCommand("mceInsertContent",false,d)
}
function r(b,a){
b.execCommand("mceInsertContent",false,a)
}
function z(b,a){
b.selection.setContent(a)
}
function s(a){
return{
st_button_smanone:{
text:"スマホに表示しないボックス",
icon:false,
tooltip:"スマホに表示しないボックス",
callback:y.bind(null,a,"[pc]","[/pc]")
},
st_button_pcnone:{
text:"PCに表示しないボックス",
icon:false,
tooltip:"PCに表示しないボックス",
callback:y.bind(null,a,"[nopc]","[/nopc]")
},
st_button_clipmemo:{
text:"クリップメモ",
icon:false,tooltip:"クリップメモ",
callback:C.bind(null,a,
'[st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"]',
"[/st-cmemo]")
},
st_button_kintou:{
text:"均等横並び",
icon:false,
tooltip:"均等横並び",
callback:r.bind(null,a,
'<div class="kintou"><ul><li>横並びコンテンツ</li><li>横並びコンテンツ</li><li>横並びコンテンツ</li></ul></div><br/>')
},
st_button_responbox33:{
text:"PCとTab3分割",
icon:false,
tooltip:"PCとTab3分割",
callback:r.bind(null,a,
'<div class="clearfix responbox33"><div class="lbox"><p>左側のコンテンツ33%</p></div><div class="lbox"><p>真ん中のコンテンツ33%</p></div><div class="lbox"><p>右側のコンテンツ33%</p></div></div><br/>')
},
st_button_responbox:{
text:"PCとTab左右40:60%",
icon:false,
tooltip:"PCとTab左右40:60%",
callback:r.bind(null,a,
'<div class="clearfix responbox"><div class="lbox"><p>左側のコンテンツ40%</p></div><div class="rbox"><p>右側のコンテンツ60%</p></div></div><br/>')
},
st_button_responbox50:{
text:"PCとTab左右50%",
icon:false,
tooltip:"PCとTab左右50%",
callback:r.bind(null,a,
'<div class="clearfix responbox50"><div class="lbox"><p>左側のコンテンツ50%</p></div><div class="rbox"><p>右側のコンテンツ50%</p></div></div><br/>')
},
st_button_responbox30s:{
text:"全サイズ左右30:70%",
icon:false,
tooltip:"全サイズ左右30:70%",
callback:r.bind(null,a,
'<div class="clearfix responbox30 smart30"><div class="lbox"><p>左側のコンテンツ50%</p></div><div class="rbox"><p>右側のコンテンツ50%</p></div></div><br/>')
},
st_button_responbox50s:{
text:"全サイズ左右50%",
icon:false,
tooltip:"全サイズ左右50%",
callback:r.bind(null,a,
'<div class="clearfix responbox50 smart50"><div class="lbox"><p>左側のコンテンツ50%</p></div><div class="rbox"><p>右側のコンテンツ50%</p></div></div><br/>')
},
st_button_responboxfree:{
text:"全サイズ左右free%",
icon:false,
tooltip:"全サイズ左右free%",
callback:r.bind(null,a,
'<div class="clearfix responboxfree smartfree"><div class="lbox" style="width:50%"><p>左側のコンテンツ%</p></div><div class="rbox" style="width:50%"><p>右側のコンテンツ%</p></div></div><br/>')
},
st_button_blackboard:{
text:"こんな方におすすめ",
icon:false,
tooltip:"こんな方におすすめ",
callback:r.bind(null,a,
'<div class="st-blackboard"><p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p><ul class="st-blackboard-list"><li>これはダミーのテキストです</li><li>これはダミーのテキストです</li></ul></div><br/>')
},
st_button_freebox:{
text:"見出し付きフリーボックス",
icon:false,
tooltip:"見出し付きフリーボックス",
callback:C.bind(null,a,
'[st-midasibox title="見出し（全角15文字）" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]<p>',
"</p>[/st-midasibox]")
},
st_button_mybox:{
text:"マイボックス",
icon:false,
tooltip:"マイボックス",
callback:C.bind(null,a,
'[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#424242" bordercolor="#424242" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold"]<p>',
"</p>[/st-mybox]")
},
st_button_memobox:{
text:"メモボックス",
icon:false,
tooltip:"メモボックス",
callback:r.bind(null,a,
'<div class="st-memobox"><p class="st-memobox-title">メモ</p><p>ここに本文を記述</p></div><br/>')
},
st_button_memobox2:{
text:"メモボックス2",
icon:false,
tooltip:"メモボックス2",
callback:r.bind(null,a,
'<div class="st-memobox2"><p class="st-memobox-title">メモ</p><p>ここに本文を記述</p></div><br/>')
},
st_button_slidebox:{
text:"スライドボックス",
icon:false,
tooltip:"スライドボックス",
callback:r.bind(null,a,
'<div class="st-slidebox-c"><p class="st-btn-open">+ クリックして下さい</p><div class="st-slidebox"><p>クリックで開かれる内容です</p></div></div><br/>')
},
st_button_toc:{
text:"目次(TOC+)",
icon:false,
tooltip:"目次(TOC+)",
callback:r.bind(null,a,"[toc]")
},
st_button_st_toc:{
text:"目次(カスタム)",
icon:false,
tooltip:"目次(カスタム)",
callback:r.bind(null,a,
'<div id="st_toc_container"><p class="st_toc_title">目次</p><ol class="st_toc_list st-original-toc"><li><a href="#">これはダミーです</a></li><li><a href="#">これはダミーです</a></li><li><a href="#">これはダミーです</a></li></ol></div><br/>')
},
st_button_star:{
text:"スター",
icon:false,
tooltip:"スター",
callback:r.bind(null,a,"[star5]")
}
}
}
function A(a){
return{
st_button_adsense:{
text:"ADs",
icon:false,
tooltip:"ADs",
callback:r.bind(null,a,"[adsense]")
},
st_button_originalsc:{
text:"SC",
icon:false,
tooltip:"SC",
callback:r.bind(null,a,"[originalsc]")
},
st_btnlink_main:{
text:"ボタンA",
icon:false,
tooltip:"ボタンA",
callback:r.bind(null,a,
'<div class="rankstlink-r2"><p><a href="#">ボタンA</a></p></div><br/>')
},
st_btnlink_sub:{
text:"ボタンB",
icon:false,
tooltip:"ボタンB",
callback:r.bind(null,a,
'<div class="rankstlink-l2"><p><a href="#">ボタンB</a></p></div><br/>')
},
st_button_blogcard:{
text:"ブログカード",
icon:false,
tooltip:"ブログカード",
callback:C.bind(null,a,"[st-card id="," label='' name='']")
},
st_button_kaiwa1:{
text:"会話A",
icon:false,
tooltip:"会話A",
callback:C.bind(null,a,"[st-kaiwa1]","[/st-kaiwa1]")
},
st_button_kaiwa2:{
text:"会話B",
icon:false,
tooltip:"会話B",
callback:C.bind(null,a,"[st-kaiwa2]","[/st-kaiwa2]")
},
st_button_kaiwa3:{
text:"会話C",
icon:false,
tooltip:"会話C",
callback:C.bind(null,a,"[st-kaiwa3]","[/st-kaiwa3]")
},
st_button_youtubeid:{
text:"YouTube",
icon:false,
tooltip:"YouTube",
callback:C.bind(null,a,"[youtube id=","]")
},
st_button_st_af_cpt:{
text:"タグID",
icon:false,
tooltip:"タグID",
callback:C.bind(null,a,'[st_af id="','"]')
},
st_button_st_af_slug:{
text:"タグSlug",
icon:false,
tooltip:"タグSlug",
callback:C.bind(null,a,'[st_af name="','"]')
}
}
}
function F(b,c){
for(var a in c){
if(!Object.prototype.hasOwnProperty.call(c,a)){
continue
}
b.addButton(a,{
type:"button",
text:c[a].text,
icon:c[a].icon,
onclick:c[a].callback
})
}
}
function B(b){
var a=[];
for(var c in b){
if(!Object.prototype.hasOwnProperty.call(b,c)){
continue
}
a.push({
text:b[c].text,
icon:b[c].icon,
tooltip:b[c].tooltip,value:c
})
}
return a
}
function v(a,b){
a.addButton("st_listbox_1",{
type:"listbox",
text:"タグ",
icon:false,
values:B(b),
onPostRender:function(){
this.value(this.settings.values[0].value)
},
onselect:function(c){
tinyMCE.execCommand(this.value(),false);
this.value(null)
}
})
}
function t(b,c){
for(var a in c){
if(!Object.prototype.hasOwnProperty.call(c,a)){
continue
}
b.addCommand(a,c[a].callback)
}
}
u={
init:function(a,b){
var c=s(a);
var d=A(a);
t(a,c);
t(a,d);
v(a,c);
F(a,d)
}
};
E.create("tinymce.plugins.st",u);
E.PluginManager.add("st_plugin",E.plugins.st)
}(window,window.document,tinymce));セレクトボックスを編集するならfunction sを、ボタンを編集するならsunfcion Aに追記することになる。
今回はボタンタグを追加したので、function Aのreturnの最後に
st_button_add_mybox1:{
text:"ボックス1",
icon:false,
tooltip:"ボックス1",
callback:r.bind(null,a,
'<div class="box_1"><p> </p></div><br/>')
}追加。
このままだと特に呼び出しもされないので、functions.phpに
if ( !function_exists( 'st_register_tiny_mce_plugins' ) ) {
function st_register_tiny_mce_plugins( $plugins ) {
$plugins['st_plugin'] = get_stylesheet_directory_uri() . '/js/tinymce-st-plugin.js';
return $plugins;
}
}
add_filter( 'mce_external_plugins', 'st_register_tiny_mce_plugins' );追記して、JSファイルの呼び出しをオーバーライドさせる。
ただ、このままだとスクリプトの内容を表示させることができないので、さらに
if ( !function_exists( 'st_tiny_mce_visual_buttons' ) ) {
function st_tiny_mce_visual_buttons( $buttons ) {
$custom_buttons = array(
'st_listbox_1' => PHP_INT_MAX,
'st_button_adsense' => PHP_INT_MAX,
'st_button_originalsc' => PHP_INT_MAX,
'st_btnlink_main' => PHP_INT_MAX,
'st_btnlink_sub' => PHP_INT_MAX,
'st_button_kaiwa1' => PHP_INT_MAX,
'st_button_kaiwa2' => PHP_INT_MAX,
'st_button_kaiwa3' => PHP_INT_MAX,
'st_button_blogcard' => PHP_INT_MAX,
'st_button_youtubeid' => PHP_INT_MAX,
'st_button_st_af_cpt' => PHP_INT_MAX,
'st_button_st_af_slug' => PHP_INT_MAX,
'st_button_add_mybox1' => PHP_INT_MAX,
);
foreach ( $custom_buttons as $custom_button => $position ) {
$buttons = _st_insert_tiny_mce_button( $custom_button, $buttons, $position );
}
return $buttons;
}
}を追記して、ボタンを実際に表示させる。
多分これでＯＫだと思う。
