サポート » プラグイン » ah-placeholder.jsプラグインの実装ができない

  • 解決済 levi1128

    (@levi1128)


    【環境】
    PHP5.3.3
    テーマ:bizvektor1.7.8

    【やりたいこと】
    IE8,9でも、input type=”text”に対してplaceholderを表示したいです。
    現在IE10以上やchrome等のブラウザでは問題なくplaceholderが表示されています。
    それをah-placeholder.jsプラグインを用いてIE8,9以下でも表示したいです。

    【やったこと】
    (参考サイト:HTML5のplaceholder属性をIEでも使えるようにするjQueryプラグイン「ah-placeholder.js」)
    1.まずはah-placeholder.jsの配布ページからソースコードをコピーし、それをテキストエディタに張り付け、「jquery.ah-placeholder.js」としUTF-8/BOMなしで保存。

    2.1.を子テーマのフォルダに保存。

    3.親テーマのheader.phpのwp_head()直前部分を以下の様に編集し保存。

    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery.ah-placeholder.js', 'http://ドメイン/wp-content/themes/biz-vektor-child/jquery.ah-placeholder.js', array());
    <?php wp_head(); ?>

    4.固定ページにショートコードを用いてページの作成しているので、そのショートコード本体を子テーマのfunction.phpに以下の様に記述(一部抜粋)。

    //(javascript)ah-placeholder初期化スクリプト
    	print "<script>";
    	print "jQuery(function() {";
    	print "jQuery('[placeholder]').ahPlaceholder({";
    	print 	"placeholderColor : 'silver',";
    	print 	"placeholderAttr : 'placeholder',";
    	print 	"likeApple : false";
    	print 	"});";
    	print "});";
    	print "</script>";
    
    	//form開始
    	print '<form id = "form" method = "GET">';
    
    	//商品名の入力
    	print '<input type = "text" id = "productForm" name = "product" placeholder = "商品名" value = "' . h($product) . '">';
    
    	//form終了
    	print '</form>';

    【エラーの内容】
    IEの開発者ツールでデバッグしていますので、そのエラー内容を貼り付けます。
    「オブジェクトは ‘ahPlaceholder’ プロパティまたはメソッドをサポートしていません。」

    詳しい方いましたら、大変お手数おかけしますが、教えていただけないでしょうか。
    宜しくお願い致します。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ah-placeholder.js 自体が読み込めていないのだと思います。

    3.親テーマのheader.phpのwp_head()直前部分を以下の様に編集し保存。

    header.phpに書くのもおかしいし、上2行はPHPなのに<?php ?>で囲まれてすらいません。

    書く場所は子テーマの functions.php です。

    function my_scripts() {
        	wp_enqueue_script( 'ah-placeholder', get_stylesheet_directory_uri() . '/jquery.ah-placeholder.js', array( 'jquery' ) );
        }
        add_action( 'wp_enqueue_scripts', 'my_scripts' );

    WordPress で jQuery を使う時の注意点

    4.固定ページにショートコードを用いてページの作成しているので、そのショートコード本体を子テーマのfunction.phpに以下の様に記述(一部抜粋)

    本題からは逸れますが、本来であればJS部分は外部ファイルにして、ah-placeholder.js と同じようにwp_enqueue_script()で読むべきだと思います。

    トピック投稿者 levi1128

    (@levi1128)

    >>Ayustar様
    ご回答いただいたソースコードで実装することができました。
    ご丁寧なご回答、ありがとうございました。

    また、JS部分の外部化に関しても、ご指摘ありがとうございます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「ah-placeholder.jsプラグインの実装ができない」には新たに返信することはできません。