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で呼び出す形にしてる。
とりあえずはこれで問題なく動いてるようです。
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に対して、オフキャンバスナビゲーションを開いた時の動作・レイアウトを追記して完了。
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; }
これでたぶんなんとかなった。なってるはず。
テーブルタグのレスポンシブ対応
参考: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設定する方法(テーブル全体をスクロール)と
テーブルヘッドを固定にしてコンテンツ部分だけスクロールする方法。
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)だとどっかにあった気がする。