仕事備忘録

2018-08-08

[]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' );

これでタグ周りがきちんと反映されて、確認が楽になった。

2018-08-03

[]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>&nbsp;</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;
	}
}

を追記して、ボタンを実際に表示させる。

多分これでOKだと思う。

2018-07-29

[]HABAKIRI_フィルターフックとクラス拡張

前回のentyri_metaカスタマイズがポンコツだったので、再度あれこれ。

フィルターフックについては、マニュアルが若干違うというか、汎用的な書き方しているためコピペすると失敗するので、改めて。

functions.php

class Habakiri extends Habakiri_Base_Functions {

	public function __construct() {
		parent::__construct();
		add_filter( 'habakiri_entry_meta', array( $this, 'habakiri_entry_meta' ));
	}
	function habakiri_entry_meta( $entry_meta ) {
		global $post;
		$entry_meta = '<li>' . get_the_date() . '</li>';
		return $entry_meta;
	}

これでentry_meta部分に日付のみが出るようになる。

ただ今回、どうせだったらhabakiriのクラスをどうにか利用したかったので、最終的に下記の形になった。

modules/entry-meta.php

require_once get_stylesheet_directory() . '/inc/class.my-entry-meta.php';

$EnetryMeta = new my_Habakiri_Entry_Meta();
$EnetryMeta->display();

inc/class.my-entry-meta.php

class my_Habakiri_Entry_Meta extends Habakiri_Entry_Meta {
	public function display() {
		do_action( 'habakiri_before_entry_meta' );
		?>
		<div class="entry-meta">
			<ul class="entry-meta__list">
				<?php
				$entry_meta = $this->published();
				$entry_meta .= $this->categories();
				$entry_meta .= $this->tags();
				$entry_meta .= $this->taxonomies();
				echo apply_filters( 'habakiri_entry_meta', $entry_meta );
				?>
			</ul>
		<!-- end .entry-meta --></div>
		<?php
		do_action( 'habakiri_after_entry_meta' );
	}
}

my-entry-meta.phpでHabakiri_Entry_Metaをオーバーライド。それをentry-meta.phpで呼び出す形にしてる。

とりあえずはこれで問題なく動いてるようです。

2017-10-20

[]Habakiriのオフキャンバスナビゲーションについて

フッターを固定してオフキャンバスナビゲーションメニューのレイヤーに隠れないようにしたい。

ということで。

オフキャンバスナビゲーションが出たときに下になるレイヤー(グレーで覆われる範囲)は、ID:contentsで指定されている。なので、ヘッダーやフッターなどナビゲーション下のレイヤーから出したい場合は、ID:contentsの外に出せばいい。

<div id="container">
  <header>
  <div id="contents">
    <div class="sub-page-contents">
    <footer>
  </div>
</div>

これを

<div id="container">
  <header>
  <div id="contents">
    <div class="sub-page-contents">
  </div>
  <footer>
</div>

こんな感じに。

で、footerに対して、オフキャンバスナビゲーションを開いた時の動作・レイアウトを追記して完了。

2017-10-13

[]Habakiriのオフキャンバスナビゲーション

ナビゲーションを閉じたときにぱっと切り替わるのが納得いかなかったので。

.responsive-nav-contents,
.off-canvas-nav {
      transition: transform 0.2s ease-out;
      -ms-transition: transform 0.2s ease-out;
      -moz-transition: transform 0.2s ease-out;
      -webkit-transition: transform 0.2s ease-out;
}

これでたぶんなんとかなった。なってるはず。

2017-09-18

[][]楽天SP商品共通説明文に使用不可のタグを突っ込む方法

<link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/xxxx/css/sp_rakuten.css" type="text/css" ="">
<iframe src="https://www.rakuten.ne.jp/gold/xxxx/sp_header.html" class="sp_nav_menu" =""></iframe ="">

意図的にタグの記述方法を間違えることで、楽天のチェックをスルーするらしい。

GOLDへのスタイルシートやインラインフレームをこれで呼び出す。

2017-09-04

[]テーブルタグのレスポンシブ対応

参考:https://liginc.co.jp/330259

サイトがなくなると困るので、こちらにもメモ。

(1)テーブル→リスト

HTML

<table>
  <thead>
    <tr>
      <th>Big heading</th>
      <th>Big heading</th>
      <th>Big heading</th>
      <th>Big heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Title</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <th>Title</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
   </tbody>
</table>

SCSS

@media only screen and (max-width:420px){
  table{
    tr{
      display: block;
      width: 100%;
    }
     thead{
      display: none;
    }
    tbody{
    display: block;
    width: 100%;
    overflow: hidden;
      th{
        list-style:none;
      }
      td{
        margin-left: 40px;
      }
      th,td{
        width: 100%;
        display: list-item;
      }
    }
  }
}

(2)HTML+CSS+JS/縦ライン重視?

HTML

<table class="js-target">
  <thead>
    <tr>
      <th>Big heading1</th>
      <th>Big heading2</th>
      <th>Big heading3</th>
      <th>Big heading4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content1</td>
      <td>Content2</td>
      <td>Content3</td>
      <td>Content4</td>
    </tr>
    <tr>
      <td>Content5</td>
      <td>Content6</td>
      <td>Content7</td>
      <td>Content8</td>
    </tr>
   </tbody>
</table>

SCSS

@media only screen and (max-width:420px){
  table{
    border-bottom:1px solid #ccc;
    tr{
      display: block;
      width: 100%;
    }
    tbody{
    display: block;
    width: 100%;
    overflow: hidden;
      th{
        list-style:none;
      }
      td{
        margin-left: 0px;
        border:1px solid #ccc;
        border-bottom: none;
      }
      th,td{
        width: 100%;
        display: block;
      }
    }
  }
  .table-head{
    display: none !important;
  }
  .row{
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
  }
  .table{
    .column{
      width: 100%;
      display: block;
      border:1px solid #ccc;
      border-bottom: none;
      position:relative;
    }
  }
  tbody{
    position:relative;
    .column{
      &:before{
        content: attr(data-label);
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
        color: #000;
        font-size:18px;
      }
    }
  }
}

JS

let $target = $('.js-target');

$target.each(function(){
  let i = '',
      $target_thead_col = $(this).find('thead th').length;
  for ( i=0; i<= $target_thead_col; i++){
    let $target_col_label =  $(this).find('tr th:nth-child('+ i +')').text();
    $(this).find('tr td:nth-child('+ i +')').replaceWith(function(){
        return $('<div class="column" data-label="'+ $target_col_label +'">').append($(this).contents());
        });
  }
  $(this).find('td').replaceWith(function(){
       return $('<div class="column">').append($(this).contents());
     });
  $(this).find('th').replaceWith(function(){
       return $('<div class="column">').append($(this).contents());
     });
  $(this).find('tr').replaceWith(function(){
       return $('<div class="row">').append($(this).contents());
     });
  $(this).find('thead').replaceWith(function(){
       return $('<div class="table-head">').append($(this).contents());
     });
  $(this).replaceWith(function(){
       return $('<div class="table">').append($(this).contents());
     });
});

あとはテーブルをDIVで囲って、DIVタグに対してover-flow:scroll設定する方法(テーブル全体をスクロール)と

テーブルヘッドを固定にしてコンテンツ部分だけスクロールする方法。

2017-07-11

[]PDFで出力する帳票に項目を追加する(ver2.13.2)

左上、宛名(個人名)の上の行に会社名を追加した。

data/class/SC_Fpdf.phpを

$text = $this->arrDisp['order_company_name'].' 様';
$this->lfText(27, 55, $text, 10); //購入企業名
$text = $this->arrDisp['order_name01'].' '.$this->arrDisp['order_name02'].' 様';
$this->lfText(27, 59, $text, 11); //購入者氏名

こんな感じ。

追加できる項目はたぶん、dtb_orderテーブルの項目と推測。

lfTextの引数の中身は

引数1:PDFに出力する際の、左からの位置

引数2:PDFに出力する際の、上からの位置

引数3:内容

引数4:フォントサイズ

ちなみに位置・フォントサイズの単位はたぶんポイント(Pt)だとどっかにあった気がする。

2017-06-19

[]印刷用CSS

メディアクエリ

@media print {
}

ちなみに、印刷用ページ(A4)は大体700pxらしい。

なので、レイアウトデザインにもよるが、

@media print {
body{
  zoom: 72%;
}
}

こうすることで、なんとなく印刷時にデザインが収まるようになる。かも。

2017-06-18

[]Habakiriのカスタマイズ

Wordpressのテーマ「Habakiri」で、entry-metaをカスタマイズした。entry-metaは、投稿記事の更新日とかカテゴリとかある部分のところ。

マニュアル https://habakiri.2inc.org/manual/filter-hooks/では、フィルターフックが使える。

実際、たとえば空タグの追加なんかはこっちでもテストできた。

functions.php

function my_habakiri_entry_meta( $entry_meta ) {
	$entry_meta .= '<li></li>';
	return $entry_meta;
}
add_filter( 'habakiri_entry_meta', 'my_habakiri_entry_meta' );

ただ、すでに入っている$entry_metaの中身を空にするのはできても、そこから新しく入れなおすのにちょっと失敗した。

クラスの外ということでか、inc/class.entry-meta.phpの中身をコピーしても動かない。

動かなかった例(たぶん)

function my_habakiri_entry_meta( $entry_meta ) {
	$entry_meta  = $this->published();
	$entry_meta .= $this->updated();
	$entry_meta .= $this->author();
	$entry_meta .= $this->categories();
	$entry_meta .= $this->tags();
	$entry_meta .= $this->taxonomies();
	return $entry_meta;
}
add_filter( 'habakiri_entry_meta', 'my_habakiri_entry_meta' );

根本的に書き方が間違ってるだけかもしれないが、おそらくはpublished()などはprotectedのため、クラスの外からは使えない、ということだろう。たぶん。

自力で$entry_metaの中身を書けばいいとも思ったが、どうせだったらすでにあるものを利用したい。

なので、思い切って、class:Habakiri_Entry_Metaを上書きしてみることにした。

まず、modules/entry-meta.phpを子テーマディレクトリにコピー。

中身を

class my_Habakiri_Entry_Meta extends Habakiri_Entry_Meta {
	public function display() {
		do_action( 'habakiri_before_entry_meta' );
		?>
		<div class="entry-meta">
			<ul class="entry-meta__list">
				<?php
				$entry_meta = $this->published();
				$entry_meta .= $this->categories();
				$entry_meta .= $this->tags();
				$entry_meta .= $this->taxonomies();
				echo apply_filters( 'habakiri_entry_meta', $entry_meta );
				?>
			</ul>
		<!-- end .entry-meta --></div>
		<?php
		do_action( 'habakiri_after_entry_meta' );
	}
}

$EnetryMeta = new my_Habakiri_Entry_Meta();
$EnetryMeta->display();

とすると、とりあえずうまく動いたっぽい。

これ、よく考えたら、リストじゃなくって定義タグにしたい、とかいうときにも使えるかも。

2016-11-18

[]タグに紐づいている記事一覧をショートコードで出す(v4.6.1)

「タグの一覧」ではなく「タグに紐づいている記事一覧」。関連記事一覧ですな。

参考:http://zero.edition.jp/archives/207

ただし、いろいろと動かなかったので、最終的には変えています。

functions.php

function tag_article_list( $atts) {
	extract( shortcode_atts( array(
		'mytag' => '',
	), $atts));
	$mytags = get_term_by('name', $mytag, 'post_tag');
	$mytag_id = $mytags->term_id;
	$args = array(
		'tag_id' => $mytag_id,
		'posts_per_page' => -1,
		'post_type' => 'post',
		'orderby' => 'date',
		'order' => 'DESC'
	);

	if($mytag_id){
	$my_query = new WP_Query($args);

	if($my_query->have_posts() ){
		$html = '';
		$html .= '<dl class="dl_actlist">' . "\n";
		while ($my_query->have_posts() ){
			$my_query->the_post();
			$html .= '<dt>' . esc_html( get_the_date() ) . '</dt>' . "\n";
			$html .= '<dd><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></dd>' . "\n";
		}
		$html .= '</dl>' . "\n";
	}
	wp_reset_postdata();
	return $html;
	}
}
add_shortcode('taglist', 'tag_article_list');

1.ショートコードに記述のタグを読み取る

2.タグ名からタグのIDを引っ張る

3.ループ作成

4.出力

 

参考と変えているのは、複数のタグに非対応にしたこと(実装時にはひとつで十分だったので)、タグIDで引っ張る形にしたこと。あと、get_template_partでループ内を記述するのではなく、$htmlに入れる形にしたこと。

変数に入れてreturnで出力する形にしたのには理由があって、変数での記述でないと、出力がなぜか固定ページの本文よりも上に出力されるので。ショートコードを記述したところに出したいのに、無関係にトップに出されると困る。

ショートコードの呼び出しは[taglist mytag="タグ名"]みたいな形で、タグ名をmytagに入れる形。日本語可。

追記:該当するタグ名がなかった場合、全クエリが表示されたため、タグIDがあった場合のみループさせるように修正。

2016-11-04

[]簡単アニメーション

ワンポイントで見出しをフェードインさせたいときなんかに。

作ればいいのでしょうが、まぁワンポイント程度だと作り込むのは面倒くさい。

参考:http://qiita.com/stkdev/items/62c9f55500eff729fe4a

CSSをダウンロードして、クラスを指定する。

ディレーションとかそのあたりは、適宜上書きしていく感じで。

中身は、animation-durationとかanimation-nameとか対応するkeyframesとかその辺のセット。

2016-11-03

[]Lightbox系?モーダルウィンドウとか

レスポンシブ対応だそうです。実際に使ったときは、モックアップ的なやつなのでレスポンシブ関係ねえ!でしたが、まぁ今後使うこともあるかもしれないので。

参考:http://blog.8bit.co.jp/?p=14459

参考:http://kwski.net/jquery/1201/

DL:https://github.com/FormstoneClassic/Boxer

Boxerというそうで。画像だけでなく、動画、コンテンツも使えるみたいなので。

ちなみに参考サイトにはありませんでしたが、実装に際してはjQueryプラグインですので、

<script type="text/javascript">
$(".boxer").boxer({
});
</script>

の記入が必要です。気づかず苦戦しましたが…。

2016年11月現在からは2年以上前のプラグインなので、もしかしたらそろそろ消える系かもしれない。そういう意味ではちょっと要注意ではある。

2016-10-25

[]無料設定していないのに送料が無料になる(ver.2.13)

2万円以下は送料無料と管理画面で設定しているのに、なぜか購入金額1万円でも送料が無料となるパターンが発生。

あれこれ試してみた結果、注文時の購入商品が14種類だとセーフ、15種類だとアウトと判明。(個数は関係ない)

どうも、大量購入→セッションデータが保存しきれない→/(^o^)\ となるらしいです。

参考:http://itoben.com/blog/1291.html

 

PHPMyAdminでセッションのデータ型を変更すれば、きちんと保存できる→送料無料になったりしない、ということで処理してみました。

具体的には、dtb_sessionテーブルのsess_dataフィールドをTEXTからLONGTEXTに変更すると良いようです。

実際に送料無料が発生しなくなったので、これで間違いないかと。

2016-10-20

[]メールタイトルを変更する(2.13.2)

デフォルトの状態だと「【店舗名】メールタイトル」となる。

基本的に気にはならないが、人によっては店舗名を後につけたい、あるいは店舗名が長いのでメールには省略した店舗名を入れたい、ということもあるかもしれない。

data/Smarty/templates/default/mail_templates/mail_titl.tpl

【<!--{$tpl_shopname}-->】 <!--{$tpl_mailtitle}-->

部分がメールのタイトルの中身になってるので、ここを変更する。

2016-10-18

[]Transmit Mail.ver2のカスタマイズ

入力内容によって送信先などを変更するカスタマイズ。

実際にやったのは、返信メールのテンプレートを変更するということですが、参考にしたのは送信先の変更です。あまり変わりはないですが。

参考:http://qiita.com/dounokouno/items/21dcf87f2e43a73be551

実際にやったことは、ほぼこの通りです。

1.input.htmlに普通にラジオボタンを入れる

<dt>ご指定<span class="color_1">※</span></dt>
<dd><input type="radio" name="ご指定" value="文面A" id="radio1" {$checked.ご指定.文面A} {$checked.default} />文面A<br />
	<input type="radio" name="ご指定" value="文面B" id="radio2" {$checked.ご指定.文面B} />文面B</dd>

 

2.config/config.phpに以下追記する

$config['mail_body_a'] = 'config/mail_body1.txt';
$config['mail_body_b'] = 'config/mail_body2.txt';
$config['mail_auto_reply_body_a'] = 'config/mail_auto_reply_body1.txt';
$config['mail_auto_reply_body_b'] = 'config/mail_auto_reply_body2.txt';

メールテンプレートは、configファイルからではなく、lib/transmitmail.phpからの位置を記述することになるので注意。

つまるところ、transmitmail.php内にあるデフォルトの指定に沿ったフォーマットにするということ。

 

3.libディレクトリにexTransmitMail.phpを作成する

<?php
class exTransmitMail extends TransmitMail
{
    public function afterSetTemplateProperty()
    {
        if ($this->page_name === 'finish') {
            switch ($this->post['ご指定']) {
                case '文面A':
                    $this->config['mail_body'] = $this->config['mail_body_a'];
                    $this->config['mail_auto_reply_body'] = $this->config['mail_auto_reply_body_a'];
                    break;
                default:
                    $this->config['mail_body'] = $this->config['mail_body_b'];
                    $this->config['mail_auto_reply_body'] = $this->config['mail_auto_reply_body_b'];
                    break;
            }
        }
    }

switchで振り分けているので、ラジオボタンがふたつ以上あっても問題ない。

今回はcheckedであらかじめ何かの値が入っている状態にしているが、switch defaultで「何も値が入っていない」状態でも問題ない形にすることはできる。

 

3.index.phpを修正する

require_once 'lib/TransmitMail.php';
require_once 'lib/exTransmitMail.php';
$tm = new exTransmitMail('config/config.php');
$tm->run();

以上。

2016-10-16

[]ajaxzip3のカスタマイズ

同じサイトで使っている他フォームとの整合性の問題で、

・入力した時点で住所を出すのではなく、検索ボタンを押すと住所が自動入力される

・存在しない郵便番号の場合は、アラートを出す

で、最終的にこうなった。

<script type="text/javascript">
$(".post-btn").click(function() {
	$("#address1").val('');
	$("#address2").val('');
	AjaxZip3.zip2addr('郵便番号', '', '都道府県', 'ご住所');
	setTimeout(function(){
		if($("#address1").val() == ''){
			alert('該当する住所が見つかりませんでした。');
		};
	}, 2000);
  });
</script>

入力部分はこんな感じ

<dt>郵便番号</dt>
<dd><input type="text" name="郵便番号" value="{$郵便番号}" class="form_text" id="postcode" /> 例)123-4567 <input type="button" value="検索" class="post-btn" /></dd>
<dt>都道府県<span class="color_1">※</span></dt>
<dd><input type="text" name="都道府県" value="{$都道府県}" class="form_text" id="address1" /></dd>
<dt>ご住所<span class="color_1">※</span></dt>
<dd><input type="text" name="ご住所" value="{$ご住所}" class="form_text" id="address2" /></dd>

setTimeoutでアラートを出すタイミングを遅らせているのは、これがないとスクリプトの動作として住所を入力する前にチェックが走ってしまい、住所が入力されたのに「見つからなかった」と警告が出るためです。

ちなみに、使ったフォームはTransmit Mailでした。

2016-10-13

[]Lightningテーマを使用した時にjQueryプラグインを追加する方法(WP:4.6.1)

右往左往したのでメモ。

基本的には、子テーマ用配布のfunctions.php内にあるfunction add_wp_head_custom内に書いてadd_actionのコメントアウトを外せばいいが、多少修正する必要がある。

というのも、そのままだと、add_actionの優先順位が1のため、wp_headで梱包されているjQuery本体を読み込むよりも先に記述されてしまうので。

つまり、

・jQueryプラグイン読み込み

・jQuery本体やstyle.css読み込み

という順番になってしまう。

追加部分にjQueryの読み込みを記述してもいいが、それだと二重に本体を読み込むことになるので、ちょっと怖い。

なので、最終的に

function add_wp_head_custom(){ ?>
<!-- head内に書きたいコード -->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/js/slick.css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/js/slick-theme.css" />
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/slick.js"></script>
<script>
jQuery(function($) {
    $('#sample').slick({
		autoplay: true,
		autoplaySpeed: 1000,
		slidesToShow: 1
	});
});
</script>
<?php }
add_action( 'wp_head', 'add_wp_head_custom',10);

というかたちになった。

これで、VK All in one Expansion Unitの書き出すOGPタグ直前で、プラグインの記述が入るようになる。

2016-10-03

[]linear-gradientを利用したストライプの場合

忘れないように考え方メモ

  • 入れ子にすることで、背景途中からストライプにするのはたぶん無理
  • ボックスの途中からストライプにする場合、単色+ストライプなら可能
  • 「全面ストライプ」の上に「単色+透過100%のグラデ」の背景を重ねる感じ
  • background-positionでストライプの開始位置を指定できるかどうかは要検討

2016-09-23

[]管理画面の投稿一覧にIDを追加する(4.6.1)

プラグインで追加するとソートできなかったので、functions.phpでの改造となりました。

必要かと言われるとあまり必要ないかもしれませんが、まぁ一応。

functions.php

/* 投稿一覧にID追加 */
function add_posts_columns_postid($columns) {
	$columns['postid'] = 'ID';
	return $columns;
}
function add_posts_columns_postid_row($column_name, $post_id) {
	if( 'postid' == $column_name ) {
		echo $post_id;
	}
}
add_filter( 'manage_edit-post_sortable_columns', 'add_posts_columns_postid' );
add_filter( 'manage_posts_columns', 'add_posts_columns_postid' );
add_action( 'manage_posts_custom_column', 'add_posts_columns_postid_row', 10, 2 );

参考HTMLのURLが紛失したのでこれだけ。