harada のアーカイブ

埋め込んだGoogle Mapのコントロールアイコンが崩れているとき

2016年12月2日

自サイトのCSS原因のようです。 参考したサイトでは以下のように指定すると直るとかいてありました。 #mapField は表示するGoogle MapのIDに変更して下さい。 ``` #mapField img { max-width: none; } ``` ですが今回のサイトでは直らなかったため、試しにmax-heightも打ち消してみたところ直りました。 ``` #mapField img { max-w
続きを読む

jQueryで指定したclassが存在したら実行する分岐の書き方

2016年12月1日

以下のように記述することで`class="home"`があるときだけ実行できます。 ``` if($('.home').length) { //classが存在したら実行する } ``` 参考:[jQueryで特定の要素が存在するかどうかを判別する処理](http://black-flag.net/jquery/20150324-5622.html) [classが存在するか否かを判定する](http://qiita.com/mimoe/items/
続きを読む

jQueryで動的に作成されたDOM要素にアクションを追加する

2016年11月25日

lightboxのウインドウで別のjQueryプラグインのアクションを実行したかったのですが、lightboxのウインドウは動的に作成されているため、普通の記述では効きませんでした。 以下の記述で無事実行できましたのでメモしておきます。 ``` (function($) { var origAppend = $.fn.append; $.fn.append = function () { return origAppend.
続きを読む

jQueryでweb上の画像にPhotoshopのトーンカーブ設定を適用する方法

2016年11月25日

そんな魔法みたいなことが、[jQuery filter.me](http://matthewruddy.github.io/jQuery-filter.me/)というjQueryプラグインで実現できます。 [サンプルはこちら](http://matthewruddy.github.io/jQuery-filter.me/) 簡単さでは前回の[読み込むだけで画像にInstagramのような加工ができるCSSライブラリ「CSSgram」](http://hacknot
続きを読む

読み込むだけで画像にInstagramのような加工ができるCSSライブラリ「CSSgram」

2016年11月24日

### 利用方法 CSSライブラリをダウンロードします。 [CSSgram](https://una.im/CSSgram/) フィルターをかけたい画像に該当のクラスを指定します。 ``` ``` 外側のクラスでも大丈夫です。 ``` ``` 追記:ただしCSSのfilterを利用するとページをPDFとして保存したい場合などになぜか画像が劣化してしまうので、PDF出力でも画像が綺麗な状態を保ちたいという方は以下の
続きを読む

PHP&jQuery:URLにパラメータを付けてパラメータの内容をフォームで取得し値に挿入する

2016年11月17日

特定のIDを持つページでフォームへのリンクをクリックした場合にそのページのIDをURLで送信し、どのページからリンクを押したかをフォーム側で取得する方法です。 ※以下のjQuery記述はWordPressの管理画面用になっていますので適宜変更して下さい。 ## URL送信側(リンク)の設定 ### HTML ``` この本を注文する ``` ### javaScript ``` jQuery(function
続きを読む

jQueryでformのselect要素を選択できない状態にして、かつ値を送信する

2016年11月15日

IDにselect_inputが設定されたセレクトボックスを選択できないように`disabled`を設定して、なおかつselectedで選択されている値がフォームで送信されるようにするには以下のように設定します。 `disabled`を設定するだけだと、値が無効になり送信されないため、送信される直前に`disabled`を解除する必要があるようです。 ``` jQuery(function ($) { $("#select_input"
続きを読む

プラグインを使わないでWordPressで自動で挿入されるPタグを無効にする

2016年11月14日

HTMLで入力したい人にとっては邪魔以外の何物でもない自動で挿入されるPタグを無効にするには、以下をfunctions.phpに追加します。 ``` remove_filter ( 'the_content', 'wpautop' ); remove_filter ( 'the_excerpt', 'wpautop' ); ``` 上記は全体に反映する方法ですが、個別に反映したい場合は以下のように挿入します。 ``` ``
続きを読む

WordPressの投稿者のドロップダウンリストの表示名を変更する

2016年11月10日

WordPressの投稿者名リストはデフォルトだと「ブログ上の表示(ユーザーネーム)」という表示形式になっています。 これを「姓 名」にするためには、functions.phpに以下を追加します。 ``` add_filter('wp_dropdown_users', 'switch_user_fullname'); function switch_user_fullname($output) { global $post; $users = g
続きを読む

WordPressでユーザーが氏名を更新した際にブログ上の表示名を変更する

2016年11月10日

functions.phpに以下を追加します。 ``` add_filter('pre_user_display_name','default_display_name'); function default_display_name($name) { if ( isset( $_POST['last_name'] ) || isset( $_POST['first_name'] ) ) { $name = sanitize_text_field(
続きを読む

iCheck利用時のチェックの判定による動作の切り替え

2016年11月9日

たとえばWordPressの記事公開のボタンが押された際に、iCheck利用のチェックボックスにチェックが入っているかどうかを調べて、入っていない場合はjQuery Validateを動かすために`required`クラスを付与したい場合は以下のようにします。 ``` jQuery("#publish").on("click", function (e) { var checked = jQuery('#switch_leases').iCheck('updat
続きを読む

WordPress投稿一覧で下書き状態のものの背景色を変更する

2016年11月7日

もともとtrにはステータスによってオリジナルのクラスがつけられているので、それに対してCSSを設定すればいい話でした。 こちらは背景色を変更+下書きという帯を付ける例です。 ``` .status-draft { background-color: #f4f4f4 !important; position: relative; } .status-draft:after { background-color: rgba(0, 0, 0,
続きを読む

特定のカスタムポスト✕ユーザーの権限によって投稿がない場合も一覧に他の人の投稿を表示しないようにする

2016年11月4日

以下をfunctions.phpに追加してください。 ``` add_filter('pre_get_posts', 'custom_pre_get_posts'); function custom_pre_get_posts($wp_query){ global $current_user, $pagenow, $current_screen; if($current_screen->id == "edit-カスタムポスト名" && $cu
続きを読む

WordPressのプロフィール画面の名・姓の表示順序を逆にする

2016年11月2日

WordPressのプロフィールページでは名前の入力欄が「名→姓」の順で表示されています。 これが日本だと入れにくいと思いますので以下のようにfunctions.phpに追加することで、「姓→名」の順番で表示することができます。 ``` add_action('admin_head-profile.php', 'town_admin_head_post_profile'); add_action('admin_head-user-edit.php', 'tow
続きを読む

WordPressの「メニュー」を出力させるときに要素のみにする

2016年11月1日

WordPress内のカスタムメニュー機能を利用させるためにはまず、functions.phpに以下を追加します。 ``` function register_my_menu() { register_nav_menu('header-menu',__( 'ヘッダーメニュー' )); } add_action( 'init', 'register_my_menu' ); ``` こうすることでWordPressのダッシュボード>外観に「メニュー」とい
続きを読む

WordPressでMasonry+Infinite scrollを利用する2(手動&改善)

2016年10月31日

[以前](http://hacknote.jp/archives/11667/)もかいたことがあるのですが、以前の方法では読み込み中のローディング表示にずれが生じていましたので変更しました。 また、自動ではなく手動で読み込むようにしてみました。 ### functions.php リンクボタンに特定のクラスを追加 ``` add_filter('next_posts_link_attributes', 'posts_link_attributes')
続きを読む

next_posts_linkとprevious_posts_linkにclassを付ける

2016年10月27日

「次のページへ」と「前のページへ」を表示する'next_posts_link'と'previous_posts_link'タグ。 そのまま利用するとただのテキストリンクになります。 以下をfunctions.phpに追加することで、aタグにbtnなどのclassを付与することができます。 ``` add_filter('next_posts_link_attributes', 'posts_link_attributes'); add_filter('p
続きを読む

ログイン中のユーザーと同じタクソノミーを持つユーザー一覧を取得する

2016年10月26日

ログイン中のユーザーと同じタクソノミーを持つユーザー一覧を取得するための覚書です。 あらかじめユーザーとカスタムタクソノミーを紐付けるのには「[LH User Taxonomies](https://wordpress.org/plugins/lh-user-taxonomies/)」を利用しています。 ### ex.areaというカスタムタクソノミーをユーザーと紐付けている場合。 ``` $owner_ids = array(); $user
続きを読む

Chart.jsでツールチップを削除する

2016年10月21日

オプションで以下のように「tooltips」の「mode」を「false」にすることで、グラフに表示されるツールチップを削除できます。 ``` var chart1 = new Chart(canvas, { type: "line", data: data, options: { tooltips: { mode: 'false' } } }); ```
続きを読む