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タグ直前で、プラグインの記述が入るようになる。
linear-gradientを利用したストライプの場合
忘れないように考え方メモ
- 入れ子にすることで、背景途中からストライプにするのはたぶん無理
- ボックスの途中からストライプにする場合、単色+ストライプなら可能
- 「全面ストライプ」の上に「単色+透過100%のグラデ」の背景を重ねる感じ
- background-positionでストライプの開始位置を指定できるかどうかは要検討
管理画面の投稿一覧に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が紛失したのでこれだけ。
配送先を追加しようとするとエラーが出る(v.2.13.2)
あれこれのたくた迷走したあと、基本に戻ってエラーログを確認したところ、dtb_other_delivテーブルでエラーが発生していることが判明。
で、よくよく調べると、そういえば会員登録時に項目を追加したなぁ、と……。
会員登録のときに(例)shop_nameを追加したのに、配送追加のテーブルには無い。配送追加の登録のフォームは会員登録と同じフォームを使いまわしている→入力項目はある→DBに送ろうとすると送り先が無い(´・ω・`)
でエラーになっているようでした。
なのでhttp://d.hatena.ne.jp/m-mitsuki/20150513参考に、dtb_other_delivテーブルにも(例)shop_nameを追加したところ、問題なく配送先の追加・修正・削除が行えるようになりました。
エラーログを確認したところ、「メイン部のテンプレートが存在しません」といったエラーは引き続き吐き出されているのですが、とりあえずは動くようになったのでいったん棚上げ。
IEにおけるlinear-gradientとborder-radius
IE10および11において、どうしてそうなってるのかさっぱりわからないままですが、ひとつの要素に対してbackground:linear-gradientとborder-radiusの両方を適用すると、なぜかグラデーションが吹っ飛ぶ事象が。
ちなみに、ひとつずつ適用させるとちゃんと表示される。つまり文法ミスとかではない。
いろいろ試した結果、linear-gradientで使用したbackground-sizeが小さすぎるためっぽいと判明。
background-image: linear-gradient(90deg, #0F6CAE, #0F6CAE 50%, #277AB6 50%, #277AB6); background-size: 2px 2px; border-radius: 5px;
はアウトですが、
background-image: linear-gradient(90deg, #0F6CAE, #0F6CAE 50%, #277AB6 50%, #277AB6); background-size: 3px 3px; border-radius: 5px;
はセーフでした。
これ、色の分割がもっと増えた時はどうなるのかとか疑問ですが、とりあえずよくわからないが対応できたのでメモ。
PCとスマートフォンでコンテンツの内容を変更させる
テーマの切り替えではなく、コンテンツの中身の変更。
参考:http://kawatama.net/web/810
まず、functions.phpに以下のコードを追加する
//PCでのみ表示するコンテンツ function if_is_pc($atts, $content = null ) { $content = do_shortcode( $content); if(!wp_is_mobile()) { return $content; } } add_shortcode('pc', 'if_is_pc'); //スマートフォン・タブレットでのみ表示するコンテンツ function if_is_nopc($atts, $content = null ) { $content = do_shortcode( $content); if(wp_is_mobile()) { return $content; } } add_shortcode('nopc', 'if_is_nopc');
で、固定ページや投稿ページの内容に、
[pc]PC用表示文言[/pc] [nopc]モバイル用表示文言[/nopc]
とすればいける。
youtube等をiframeで入れ込んだ時にレスポンシブ対応にする方法
参考:http://mae.chab.in/archives/2527
youtubeでなくてもいいけど、基本iframeタグは幅と高さを指定する。
<iframe width="500" height="300" ...></iframe
ただしこのままだと、500px×300pxがスマホでも確保されるため、横スクロールが発生することになる。
その対応。
HTML
<div class="wrap_youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/HIOooL-vXeQ" frameborder="0" allowfullscreen></iframe> </div>
@media screen and (max-width: 560px) { .wrap_youtube { position: relative; width: 100%; padding: calc(315 / 560 * 100%) 0px 0px 0px; } .wrap_youtube iframe { position: absolute; top: 0px; left: 0px; width: 100%!important; height: 100%!important; } }
paddingの算出にcalcを使うので、CSS3限定になるけれど、まぁ対応ブラウザは最新だけでいいや、という人ならこれで問題ないかと。