サポート » 使い方全般 » 検索フォームの虫眼鏡マークが消えました。

  • 解決済 kntn13

    (@kntn13)


    まったくの初心者です。よろしくお願いします。
    TwentyEleven1.3を直接編集してホームページを作っていたのですが、子テーマを作って編集した方がいいということで子テーマを作りました。
    すると今まで表示されていた検索フォームの中の「虫眼鏡」マークが表示されなくなってしまいました。(ヘッダー部分、サイドバー部分のウィジェットとも)
    なんとか元に戻したいのですが、どうにもなりません。
    ただし親テーマの方は今まで通り「虫眼鏡」マークは表示されています。
    うろ覚えですが、子テーマ制作直後にもう消えていたように思います。
    ちなみに親テーマのファイルは「functions.php」以外はすべて元の設定に戻したはずです。
    「functions.php」のみヘッダー画像の高さを変えるために親テーマをいじっています。(288pxを230pxに変更するため)
    子テーマでは「style.css」と「content.php」「footer.php」「header.php」「single.php」「page.php」「image.php」を親テーマからコピーして編集を加えていますが、今回の問題に直結するような修正はしていないように思います。
    使い始めたばかりですが、他の疑問は本を読んでいろいろな所をいじったりしながら解決してきたのですが、こればかりはどうにもならず質問させていただきました。
    よろしくお願いいたします。
    あ、それと本やネットを見ていると検索フォームの中に「虫眼鏡」マークと「検索」という文字が表示されている例がほとんどなのですが、私の場合はもともと「検索」の文字は表示されていません。なぜでしょう?

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • nobita

    (@nobita)

    こんにちは

    chile/header.phpに

    <?php
    				// Has the text been hidden?
    				if ( 'blank' == get_header_textcolor() ) :
    			?>
    				<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
    				<?php get_search_form(); ?>
    				</div>
    			<?php
    				else :
    			?>
    				<?php get_search_form(); ?>
    			<?php endif; ?>

    のコードが存在する事を念のため確認してください

    child/style.css

    #searchform に何かルールを書いていませんか?

    あ、それと本やネットを見ていると検索フォームの中に「虫眼鏡」マークと「検索」という文字が表示されている例がほとんどなのですが、私の場合はもともと「検索」の文字は表示されていません。なぜでしょう?

    検索フォームのソースに以下の属性はありますか?
    placeholder=”Search”

    IE等プレースホルダ属性をサポートしていないブラウザもあります。

    トピック投稿者 kntn13

    (@kntn13)

    nobita様
    早速のお返事ありがとうございます。
    ご指示の通り確認しましたが、解決しませんでした。

    child/header.phpのコードは存在しています。
    コメントアウトすると消え、直すと虫眼鏡が無いボックスが表示されます。

    child/style.cssの#serchformにもルールの追加指定はありません。
    ヘッダーの高さ変更に伴い、位置を上げていますが関係ないと思います。

    searchform.phpは子テーマにはコピーせず、親テーマのものをそのまま読み込んでいますので問題ないと思います。
    親テーマでは虫眼鏡のみ表示されている状態です。

    ブラウザは「IE9.0.6」を使用しております。
    ささいなことですが気持ちが悪いのでいっそ検索窓を表示しないようにしようかとも思うのですが、やはりある方がいいので…
    よろしくお願いいたします。

    トピック投稿者 kntn13

    (@kntn13)

    たびたび申し訳ありません。追記させてください。

    変更を加えていない親テーマ「TwentyEleven」の「style.css」のみを@importで読み込ませたもので試すと虫眼鏡は表示されます。
    虫眼鏡が出なくなってしまっている子テーマの「style.css」のみをコピーしたもので試すと虫眼鏡は表示されません。
    ということはやはり子テーマの「style.css」のどこかに問題があるという解釈でいいのでしょうか?
    「style.css」への変更点は「WordPress 3.x カスタマイズブック」というのにすべて(おそらく)記入しながらやっていますので、怪しい点は見あたらないのですが・・・
    とはいえ初心者なので何かやらかしてしまっているのかもしれません。
    ご指導お願いいたします。

    nobita

    (@nobita)

    こんにちは

    虫眼鏡は、style.cssの以下の部分でスタイルルールが決められています
    画像パスは、相対パスなので、チャイルドにコピーした場合、チャイルドテーマのimageディレクトリを参照しますので、チャイルドテーマにイメージディレクトリが存在しない場合は、表示されません

    input#s {
    background: url(images/search.png) no-repeat 5px 6px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 14px;
    height: 22px;
    line-height: 1.2em;
    padding: 4px 10px 4px 28px;
    }

    ちなみに親テーマのファイルは「functions.php」以外はすべて元の設定に戻したはずです。
    「functions.php」のみヘッダー画像の高さを変えるために親テーマをいじっています。(288pxを230pxに変更するため)

    このようにした場合は、テーマのアップデートでカスタマイズは失われます。

    チャイルドテーマの、functions.phpで処理する事をおすすめします。

    親テーマの画像高さが以下のように記述されていれば、

    if(!defined('HEADER_IMAGE_HEIGHT')){
            define('HEADER_IMAGE_HEIGHT', 198);
        }

    child themeのfunctions.phpで
    define('HEADER_IMAGE_HEIGHT', 198);
    等としてあげれば、定数が上書き(?)される事はありません。

    そのほか、add_filter等が、親テーマの設定に戻るなどの場合は、

    add_action( 'after_setup_theme', 'my_twentyeleven_setup',11 );
    
    functions my_twentyeleven_setup(){
    
    //親テーマのあとに読み込みたいやつを記述
    
    }

    というテクニックもあるみたいです:-)

    トピック投稿者 kntn13

    (@kntn13)

    何度もご親切にありがとうございます。お返事が遅くなり申し訳ありません。
    いろいろためしてみましたがまだ解決しません。

    child themeのfunctions.phpで
    define(‘HEADER_IMAGE_HEIGHT’, 198);
    等としてあげれば、定数が上書き(?)される事はありません。

    やってみましたが、もともとの私の方での編集方法が違うようです。

    親テーマのfunctions.phpには最終行にヘッダー画像の高さを変えるために

    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 230 ) );

    と記載しています。

    さらにその上には投稿ページにサイドバーをつけるために

    function lets_get_two_colums_on_single_php_too( $classes ) {
        if ( is_single() ) {
            $classes[] = 'two-columns-singular';
            for ( $i = 0; $i < count($classes) ; $i++ ) {
                if ( $classes[$i] == 'singular' ) {
                    unset($classes[$i]);
                    break;
                }
            }
        }
        return $classes;
    }add_filter( 'body_class', 'lets_get_two_colums_on_single_php_too', 20 );

    と書き足しています。

    変更点はこの2点のみと思います。
    子テーマには「function.php」は今のところは置いていません。
    もう少しで解決しそうな気がするのですが・・・

    nobita

    (@nobita)

    こんにちは

    background: url(images/search.png) no-repeat 5px 6px;

    なので、現状のコピーしたstyle.cssを使うなら、チャイルドテーマに、imagesディレクトリを作って、search.pngを親テーマからコピーして張り付ければ、虫眼鏡は表示できると思います。

    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 230 ) );

    apply_filtersの目的がわかりませんが、これは、add_filter()を使って、動作しますか?

    精査していませんが、twentyelevenは、after_setup_themeフックを使って、’HEADER_IMAGE_HEIGHTの値を定義していますので、functions.phpにdefineされていれば、定数ですから、変更が出来ないので、230が適用されているという事だと思います。

    ですから、チャイルドテーマに、functions.phpを作成して、以下のように書けば、今と同様の動作になるんじゃありませんか?

    <?php
    	function lets_get_two_colums_on_single_php_too( $classes ) {
    		if ( is_single() ) {
    			$classes[] = 'two-columns-singular';
    			for ( $i = 0; $i < count($classes) ; $i++ ) {
    				if ( $classes[$i] == 'singular' ) {
    					unset($classes[$i]);
    					break;
    				}
    			}
    		}
    		return $classes;
    	}
    
    	define( 'HEADER_IMAGE_HEIGHT', 230 );
    	add_action( 'after_setup_theme', 'my_twentyeleven_setup',11);
    
    	function my_twentyeleven_setup(){
    		add_filter( 'body_class', 'lets_get_two_colums_on_single_php_too' );
    
    	}
    
    ?>

    ということを言いたかったのですが、

    子テーマには「function.php」は今のところは置いていません。

    この部分は、虫眼鏡の表示とは、無関係ですが、
    親テーマのカスタマイズは、テーマアップデートで、帳消しになりますから、チャイルドテーマでカスタマイズをおすすめしています。
    チャイルドテーマに、functions.phpをおきたくない理由はありますか?

    トピック投稿者 kntn13

    (@kntn13)

    何度も申し訳ありません。

    チャイルドテーマに、functions.phpを作成して、以下のように書けば、今と同様の動作になるんじゃありませんか?

    ありがとうございます。その通りにしたら今までと同じように表示できました。
    手順としては親テーマの「functions.php」に追記していたコードを削除し、初期状態に戻しました。そのあと子テーマに空の「functions.php」を作成し、上でお教えいただいたコードを書き込みました。と、現在はこのような状態になっています。

    あとは

    現状のコピーしたstyle.cssを使うなら、チャイルドテーマに、imagesディレクトリを作って、search.pngを親テーマからコピーして張り付ければ、虫眼鏡は表示できると思います。

    申し訳ありません。これの意味がまったく理解できず、虫眼鏡表示にはいたっていません。
    ご指導いただけましたら幸いです。

    トピック投稿者 kntn13

    (@kntn13)

    nobita様
    ありがとうございます!できました!
    初心者なもので「ディレクトリ」という言葉がわからず苦労しました。フォルダと同義なのですね。勉強になりました。

    このたびは大変親切にお教えいただき本当にありがとうございました。
    ここまで本を読んだりネットで検索したりといろいろやってきたのですが、こればかりはお教えいただかないとどうにもなりませんでした。
    今回はいい経験になりました。今後も勉強していきたいと思います。
    また何かの折にはご指導いただきますようお願いいたします。御礼まで。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「検索フォームの虫眼鏡マークが消えました。」には新たに返信することはできません。