サポート » その他 » HTMLに生成されるstyleについて

  • 解決済 nels0n

    (@nels0n)



    WordPressの自作テーマを作成しており画像一覧のページを作成しております。
    HTMLで出力する際に、意図していないstyle=heightが付与されてしまうのですが、functionファイルなどで削除する事は可能なのでしょうか?

    ご存知の方がいらっしゃいましたら、ご教授頂きたいです。
    よろしくお願い致します。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • WordPress のどのテンプレートタグや関数を使っているか分かれば、フックの有無(functions.phpでの可否)を調べられると思いますよ。

    gblsmさん

    ありがとうございます。Wordpressを学習中でして、どの観点から追っていけば良いかわからなかった為、大変助かりました。
    テンプレートタグや関数が原因であるという線で調査してみます。

    例えば wp_get_attachment_image() を使うと img タグに width や height 属性が出力されますが、代わりに wp_get_attachment_image_src() を使って画像の URL を取得し、自分で img タグを出力することができます。

    • この返信は2 ヶ月、 3 週間前に  gblsm さんが編集しました。

    gblsmさん

    具体例ありがとうございます。
    wordpress関数が余計なstyleを付与していると考えphpファイルを見ていました。
    今回、特定のカテゴリで投稿している記事を「<?php if(have_posts()): while(have_posts()): the_post(); ?>」にて一覧表示させることで画像一覧のページを作っております。
    この「<?php if(have_posts()): while(have_posts()): the_post(); ?>」がHTMLに出力する際にstyleを付与していると考え対策を調べております。
    もし似たような経験や、”こうすべきである”といった点がありましたら、ご教授いただけたら幸いです。
    私も現在調べておりますので自己解決しましたらクローズいたします。

    以下にソースコードと出力例を記載させていただきます。

    ———————————————
    <?php if(have_posts()): while(have_posts()): the_post(); ?>
    <article class=”portfolio-box”>
    <div class=”inner-box”>
    <div <?php post_class( ‘thumb-img’ ); ?>>
    “>
    <?php if( has_post_thumbnail() ): ?>
    <?php the_post_thumbnail(‘full’); ?>
    <?php else: ?>
    /add/no-image.gif” alt=”no-img”/>
    <?php endif; ?>

    </div>
    <div class=”info-space”>
    <dl>
    <dt class=”article-title”><?php the_title(); ?></dt>
    </dl>
    </div>
    </div>
    </article>
    <?php endwhile; endif; ?>
    ———————————————

    <article class=”portfolio-box style=”height: 397.44px;”>
    <div class=”inner-box”>
    <div class=”thumb-img post status-publish format-standard has-post-thumbnail hentry category-portfolio”>



    </div>
    <div class=”info-space”>
    <dl>
    <dt class=”article-title”>hogheoge</dt>
    </dl>
    </div>
    </div>
    </article>

    ※<article class=”portfolio-box”>に意図していないstyleが付与されている

    事象について追記いたします。
    google chromeの「ページの出力」にて確認すると「<article class=”portfolio-box」となっております。
    しかしgoogle developer toolsにて確認すると「<article class=”portfolio-box style=”height: 397.44px;”>」のように表示されていることを確認しました。

    google developer toolsのstyleタブにて確認すると「element.style」に「height: 379.44px;」が付与されておりこのstyleを削除したいと考えております。

    wordpress関数の影響ではないような気もしてきたのですが、どなたか似た事象に遭遇したことはありますでしょうか…

    コードが崩れて読めませんから、貼り付けたコードを(送信する前に)範囲選択して code ボタンをクリックしましょう。するとバッククォートで囲まれて投稿され、崩れなくなります。または、コード共有サイト (pastebin.com など) へアップロードしてそのリンクをここに投稿しましょう。

    ところで style 属性が追加されたタイミングを正確に把握しませんか。
    WordPress が出力したときに追加済みなら、他の Web ブラウザーでもソースを見れば追加済みのはずですよね。例えば Internet Explorer なら「右クリック → ソースの表示」、Firefox なら「右クリック → ページのソースを表示」で。
    参考 https://faq.cybozu.info/alphascope/cybozu/web/office10/Detail.aspx?id=2143

    • この返信は2 ヶ月、 3 週間前に  gblsm さんが編集しました。

    ページのソース上では存在しない要素が、デベロッパーツール上で存在するのであれば、スクリプト(JavaScript)で追加されたのものではと思われます。
    自作テーマということですが、なにか別のテーマをベースにしたり、テーマの雛形やジェネレーターで作成したテーマを使用していませんか?

    gblsmさん

    返信遅くなり、申し訳ありません。
    仰るようにstyleが追加されたタイミングを確認してwordpress関数による影響ではなくishitakaさんのコメントにあるようにjavascriptが影響していることがわかりました。

    ですので、javascriptを編集して無事解決することが出来ました。
    ご協力いただき大変助かりました。

    ishitaka さん

    返信遅くなり、申し訳ありません。
    ishitakaさんの仰るようにjavascriptの影響によってstyleが追加されておりました。
    お恥ずかしい話ですが、wordpressのテーマ作成を始めてから長い間期間が空いてしまい自分か書いたコードを忘れており原因を特定できておりませんでした。

    無事、問題解決できました。ご協力いただきありがとうございました。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • このトピックに返信するにはログインが必要です。