サポート » 使い方全般 » メニュー(img)から移動すると、移動先で該当の画像のみ消えてしまう

  • 解決済 sskdesi

    (@sskdesi)


    wordpress初心者です。

    page.php内にメニューとして画像を置き(例<li><a href="◯◯"><img src="http://◯◯.jp/wp-content/themes/◯◯/images/◯◯.png" class="btn" alt="◯◯" " /></a></li>)、クリック→移動先のページが読み込まれると、リンク元メニュー画像部分にはaltが表示され、該当部分の画像のみが消えてしまう現象が解決出来ず、本当に困っております。

    同じく、header.phpに配置した「ホームに戻る」画像も、「index.php」をurlとして指定してやると画像は消えないのですが、「home.php」やトップページのurlを指定すると、同様の結果に。また、「<?php echo home_url(); ?>」「<?php echo get_option('home'); ?>」でも消えてしまいます。

    何か根本的な間違いがあると思うので、ご教授下さい。

    • wpは「http://〇〇.jp/wp」といったディレクトリに設置しておりません
    • オリジナルテーマを作成
    • home.phpから<?php query_posts('page_id=〇〇'); ?>を使用
    • メニューはpage.phpに記載
    • 同メニューをindex.php、home.phpに重複して記載しても消える
    • 画像は「onmouse」でロールオーバー画像を指定していると、カーソルを乗せると復活。jsでは変化なし
    • home.php

      <?php get_header(); ?>
      
      <div id="content">
      <div id="main">
      <?php query_posts('page_id=/*〇〇←ホームに指定しているページID*/'); ?>
      <?php if(have_posts()): while(have_posts()): the_post(); ?>
      <?php the_content(); ?>
      <?php endwhile; endif; ?>

      page.php

      <?php get_header(); ?>
      
      <div id="content">
      <div id="main">
      
      <?php if ( have_posts()): while ( have_posts()): the_post(); ?>
      <?php the_content(); ?>
      <?php endwhile; endif; ?>

      index.php

      <?php get_header(); ?>
      
      <div id="content">
      <div id="main">
      
      <?php if(is_home()): ?>
      
      <?php query_posts('page_id=/*〇〇←homeと同様*/'); ?>
      <?php if(have_posts()): while(have_posts()): the_post(); ?>
      <?php the_content(); ?>
      <?php endwhile; endif; ?>
      
      <?php else; ?>
      
      <?php if(have_posts()): the_post(); ?>
      <h2><?php the_title(); ?></h2>
      <?php the_content(); ?>
      <?php endwhile; endif; ?>
      
      <?php endif; ?>

      です。
      宜しくお願い致します。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • 肝心の画像部分のソースが無いですね。

    それと確認ですが、消えてしまうとおっしゃられていますが、そのときブラウザのソースには正しいURIが渡されているか確認しましたか?
    また
    <img src="http://◯◯.jp/wp-content/themes/◯◯/images/◯◯.png" class="btn" alt="◯◯" " />
    とは、ブラウザに渡されたコードであって、テーマファイル内では
    <img src=”../images/◯◯.png” class=”btn” alt=”◯◯” ” />
    こんなふうに相対アドレスで書いてしまっているとかではないですか?

    header.phpに配置した「ホームに戻る」画像も、「index.php」をurlとして指定してやると画像は消えないのですが、「home.php」やトップページのurlを指定すると、同様の結果に。

    この辺の意味が若干わからないのですが、index.phpやhome.phpをurlとして指定することはないと思うのです・・・?index.phpやhome.phpはテンプレートであってじかにファイルを指定するような使い方は通常しません。もう少し具体的に説明していただけますか?

    トピック投稿者 sskdesi

    (@sskdesi)

    >kvexさま

    返答ありがとうございます。助かります。
    画像部分のソースは、上記page.php以下に

    <!-- /main --></div>
    <div id="navl">
    <ul id="navlmenu">
        <li><a href="mail"><img src="http://◯◯.jp/wp-content/themes/◯◯/images/◯◯.png" class="btn" alt="◯◯" width="210" height="80" /></a></li>

    以下、リストの羅列です。class部分でyuga.jpのロールオーバーを反映させております。

    ブラウザに表示されるアドレス、ページソース内に書かれているアドレス共に問題なく、画像のアドレスを指定してやると、画像も確認出来ます。

    ブラウザは、
    ・Google Chrome8.0.552.231,Fire Fox3.6.13,safari 5.0.3,Opela11.00等で確認
    その他の情報として、

    • Akismet使用
    • プラグイン停止後確認済
    • ブラウザのキャッシュ・Cookie削除済
    • 分かる範囲内でwpの設定画面も確認済

    です。

    それと、page.phpには絶対アドレスを記載しております。

    トピック投稿者 sskdesi

    (@sskdesi)

    >shokun0803

    返答ありがとうございます。
    説明不足で申し訳ありません。

    page.phpにはメニューとして画像を配置し、<a href="A">で指定したAページに移動すると、メニューから、Aのメニュー項目画像だけが抜け落ちる感じでaltが表示されます。

    同様の現象が起こる例として、
    headerに配置した「ホーム」「ロゴ」などの画像にトップページのurlを記載しても、コード書いてみても、何故か「ホーム」「ロゴ」などの画像が消え、altが表示されてしまうのです。

    根本的な部分が理解出来ていないのだと思うのですが、index.phpを入れた理由は、上記のように、imgファイルのリンク先urlとして<a href="">内にトップページのurlを絶対アドレスで指定、や、<?php echo home_url(); ?><?php echo get_option('home'); ?>を指定しても画像が消えてしまったため、思い通りの結果となるindex.phpを緊急措置として入れております。

    header.phpに配置した「ホーム」「ロゴ」などの画像は、トップページへ移動後、一瞬画像が表示された後に、altへと変わるため、header.phpで認識された後、index.php、page.php、home.phpのどれかで否定されている感じのような気がします。ボタンをクリックしない場合、例えば、ブラウザのお気に入りなどからトップページに移動しても、同サイト内の他ページからホームボタンをクリックしても同様の結果に、何故か「index.php」をアドレスに指定した場合のみ表示されるので首を捻っております。

    他のフォーラムを見せていただいても、同じような現象がなかったため、当方が恐ろしく間抜けな間違いをおかしているのだと思います。

    トピック投稿者 sskdesi

    (@sskdesi)

    一つ気になったのですが、imgフォルダをuploadフォルダではなく、作成したテーマと同じフォルダ内に作成していることなどは、問題ないでしょうか?

    header.phpに配置した「ホーム」「ロゴ」などの画像は、トップページへ移動後、一瞬画像が表示された後に、altへと変わるため、

    これと

    class部分でyuga.jpのロールオーバーを反映させております。

    これから予測するに、JavaScriptで一度表示された画像のurlが書き換えられていると思われ。
    ブラウザでJavaScript無効などにしてロールオーバーをなかったことにしても画像は表示されませんかね?

    トピック投稿者 sskdesi

    (@sskdesi)

    >shokun0803

    お時間頂いて恐縮です。
    指摘して頂いた通り、JavaScriptを無効にすると表示されます!

    でも、header内に配置したlogoの画像にはロールオーバーの指定はないはずなのですが、どういう状態で、何が起こっているのでしょうか?

    また、どう対処すれば改善できるのか、宜しければご教授下さい。

    header.php内には、
    `<script type=”text/javascript” src=”http://◯◯.jp/wp-content/themes/◯◯/js/yuga.js&#8221; charset=”utf-8″></script>`

    <script type="text/javascript">
        jQuery(function(){
    	jQuery('ul.sf-menu').superfish().find('ul').bglframe({opacity:false});
    	});
    </script>

    こんな感じの直書きとをしています。このあたりに問題があるのでしょうか?

    トピック投稿者 sskdesi

    (@sskdesi)

    フォーラム内のhttp://goo.gl/JGuoYのプラグインように、導入したjsを切る訳にいかないので、設置場所やコードの変更で対応することが可能でしょうか?

    導入しているjsは以下が全てです。jsはテーマファイル内に設置した「js」フォルダ内に入れております。

    <script type="text/javascript" src="http://◯◯.jp/wp-content/themes/◯◯/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://◯◯.jp/wp-content/themes/◯◯/js/jquery.bgiframe.min.js"></script>
    <script type="text/javascript" src="http://◯◯.jp/wp-content/themes/◯◯/js/hoverIntent.js"></script>
    <script type="text/javascript" src="http://◯◯.jp/wp-content/themes/◯◯/js/superfish.js"></script>
    <script type="text/javascript" src="http://◯◯.jp/wp-content/themes/◯◯/js/thickbox.js"></script>
    <script type="text/javascript" src="http://◯◯/wp-content/themes/◯◯/js/yuga.js" charset="utf-8"></script>
    <script type="text/javascript">
        jQuery(function(){
    	jQuery('ul.sf-menu').superfish().find('ul').bglframe({opacity:false});
    	});
    </script>

    JQUeryが重複している可能性を改善するには、上記コードを削除後、<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js></script>の指定でOKでしょうか?

    それとも、
    wp_enqueue_script( $src =http:///*〇〇,*/http:///*〇〇,と羅列*/, $deps = array(), $ver = false );
    こんな感じでコードを書くのがベターでしょうか?
    「deps」には、jQueryに関連するjsを書き連ねるのかな?と予想しております。「ver」は何を書くのかわからないです。JQueryの「1.4.4」部分とかでしょうか?

    トピック投稿者 sskdesi

    (@sskdesi)

    >shokun0803

    JavaScriptで一度表示された画像のurlが書き換えられていると思われ。

    ズバリ、ご指摘の部分でした。
    ソースを修正し、無事、解決致しました。
    ありがとうございました。

     失礼します。同じ問題を抱えています。
     どのようにソースを修正されたのか教えて頂けませんか!

     

    トピック投稿者 sskdesi

    (@sskdesi)

    >my8さま

    初めまして。
    まったく同じ状況と仮定して書いていきますね。

    上記「shokun0803さん」に指摘して頂いた通り、
    これはWordpressの問題ではなく、使用しているJavascriptの問題でした。
    僕はWordpress初導入だったので、特有の現象だと早合点しておりました。

    問題とは、
    webサイトに使用したjsのコード内に、
    「img」に反応して、名前を書き換える部分があったのです。

    つまり、
    〇〇〇〇.pngとしている筈が、
    勝手に〇〇〇〇_〜(←この部分が追加される).pngなどと書き換えられていたんです。
    画像ファイルには〇〇〇〇_〜.png何てものはありませんから、表示されない。
    というだけの話でした。

    なので、解決方法としては、
    1)ブラウザのJavascriptを非表示にして画像が表示されるか確認
    2)表示される場合は、Jsの問題です。
    3)再度、Javascriptを「表示」にしてみて、非表示状態の画像URLが何に変更されているのか確認
    4)jsの該当する部分を変更して終了。です

    恐らくjsファイルの中に、複数のjsが入っていると予測されるので、
    ファイル内

    $(function() {
    		$.〇〇.〇〇();
    		$.〇〇.〇〇();
    		$.〇〇.〇〇();
    		$.〇〇.〇〇();
    		$.〇〇.〇〇();
    		$.〇〇.〇〇();
    	});

    の部分に、こんな感じでダブルスラッシュを入れてやると、
    機能を停止出来るので、どの部分に問題があるか順番に検証してやってください。

    $(function() {
    		//$.〇〇.〇〇();
    		$.〇〇.〇〇();
    		$.〇〇.〇〇();
    		$.〇〇.〇〇();
    		$.〇〇.〇〇();
    		$.〇〇.〇〇();
    	});

    で、その部分の該当箇所を変更です。
    恐らく、「img」に反応するようになっているコードがあるので、
    書き換えてやればOKです。

    簡単な作業なので大丈夫だとは思いますが、
    分からない場合は、Javascriptについて調べてみて下さいね。

    webサイトが無事完成することをお祈りいたしております!!

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「メニュー(img)から移動すると、移動先で該当の画像のみ消えてしまう」には新たに返信することはできません。