• 解決済 kiki222

    (@kiki222)


    横幅が広いイメージ画像のみにclassを付けたいです。

    現在、1つの画像に1つの投稿ページを作成しています。
    カスタムフィールドを利用し
    「mainphoto」と言うフィールドを追加して
    そこにhttp://www.example.com/images/sample.jpg
    を記載し、

    <?php
     if(get_post_meta($post->ID,'mainphoto',true)){
      echo '<p><img src="'.get_post_meta($post->ID,'mainphoto',true).'" alt="';
      echo the_title_attribute( 'echo=false' ).'"></p>';
      }
     if(get_post_meta($post->ID,'lower-desc',true)){
      echo '<p class="img-desc-bottom">'.get_post_meta($post->ID,'lower-desc',true).'</p> ';
      }
    ?>

    として、画像を表示させています。
    (今までhtmlで作ったサイトの画像フォルダから移動させると、
    アドレスが変わりgoogle的に良くないのかな?と思っての事です。)

    横長の画像と縦長の画像があり、
    レスポンシブデザインに対応させたい為、
    横長の画像のimgタグにclassを与えて、max-widthを設定したいと思っています。

    方法としてショートコードを利用すれば良いかと思い、
    function.phpに

    function my_add_yokosize() {
       echo ' class="yoko280"';
    }
    add_shortcode('yokosize', 'my_add_yokosize');

    と記載し、
    投稿用のsingle.phpに

    <?php
     if(get_post_meta($post->ID,'mainphoto',true)){
      echo '<p><img src="'.get_post_meta($post->ID,'mainphoto',true).'" alt="';
      echo the_title_attribute( 'echo=false' ).'"';
        if ( has_shortcode( $post->post_content, 'yokosize' ) && is_singular() ) {
      echo do_shortcode('[yokosize]');
      }
      echo '></p>';
      }
     if(get_post_meta($post->ID,'lower-desc',true)){
      echo '<p class="img-desc-bottom">'.get_post_meta($post->ID,'lower-desc',true).'</p> ';
      }
    ?>

    など色々と試してみたのですが上手くいきません。
    解決策を教えて頂けないでしょうか?
    詳しくPHPを分かっておりません。
    何卒、宜しくお願い致します。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック投稿者 kiki222

    (@kiki222)

    現在の状況としましては、
    ショートコードを加えたページの画像にclassは付けられていますが、
    コンテンツの最後に
    文字として
    class=”yokosize”
    と表示されてしまっています。
    この表示をなくしたいです。

    宜しくお願い致します。

    トピック投稿者 kiki222

    (@kiki222)

    間違えました
    文字として表示されているのは
    class=”yoko280″
    です。
    宜しくお願い致します。

    こんにちは

    echo ' class="yoko280"';

    return ' class="yoko280"';

    じゃないですか?

    トピック投稿者 kiki222

    (@kiki222)

    nobita様
    回答ありがとうございます。
    return ' class="yoko280"';
    に変更致しましたが、状況は変わらなかったです。
    ただ、現在カスタムフィールドの値のみを出力しておりまして、
    single.phpに記載していた

    <?php the_content(); ?>
    <?php endwhile; ?>
    <?php endif; ?>
    <?php get_footer(); ?>

    から
    <?php the_content(); ?>
    を削除すると画面上に表示されなくなり、
    imgにclassが加えられる様になりました。
    現在は本文に何も記載していないので問題がないのですが、
    今後記載した時に、表示されない事になるかと思うと、
    何か他の方法があれば教えて頂けますと大変助かります。
    何卒、宜しくお願い致します。

    ショートコードが正常に動作しているので、投稿本文( the_content() )に returnした値が表示されるのは、正しい動作です。

    投稿本文に表示したくないのであれば、他の方法を考えたほうがいいと思いますが、

    (このやり方でも、できなくはないですが、、、)

    横長の画像と縦長の画像があり、
    レスポンシブデザインに対応させたい為、
    横長の画像のimgタグにclassを与えて、max-widthを設定したいと思っています。

    なぜ、縦長と横長でスタイルを分ける必要があるのか、
    どのようなスタイルルールを記述しているのか教えていただけますか?

    トピック投稿者 kiki222

    (@kiki222)

    nobita様
    お返事ありがとうございます。
    cssは
    横長の画像には

    img.yoko280 {
     width: 100%;
     max-width: 280px;
     height: auto;
    }

    縦長の画像には

    img.tate260 {
     width: 100%;
     max-width: 260px;
     height: auto;
    }

    としています。
    宜しくお願い致します。

    何種類か考えてみました

    お好みで、

    http://tenman.info/labo/snip/archives/5593

    トピック投稿者 kiki222

    (@kiki222)

    nobita様
    お返事ありがとうございます。
    ブログでも、色々な方法を教えて頂き、本当にありがとうございます。
    ブログの中で仰っていたように

    カスタムフィールドに、URLを入力し、更に投稿本文にショートコードを記述するのは、手間だろう。

    頂いた情報から、
    カスタムフィールドを変更する事にしました。
    縦長の画像の場合はmainphotoにアドレスを記載し、
    横長の画像の場合はmainphoto2にアドレスを記載するようにして、

    <?php
     if(get_post_meta($post->ID,'mainphoto',true)){
      echo '<p><img src="'.get_post_meta($post->ID,'mainphoto',true).'" alt="';
      echo the_title_attribute( 'echo=false' ).'" class="tate260"></p>';
      }
     if(get_post_meta($post->ID,'mainphoto2',true)){
      echo '<p><img src="'.get_post_meta($post->ID,'mainphoto2',true).'" alt="';
      echo the_title_attribute( 'echo=false' ).'" class="yoko280"></p>';
      }
    
     if(get_post_meta($post->ID,'lower-desc',true)){
      echo '<p class="img-desc-bottom">'.get_post_meta($post->ID,'lower-desc',true).'</p> ';
      }
    ?>

    として、ショートコードは使わない事にしました。
    もっとスマートな方法があるのだと思いますが、
    今の私の知識では解決できない事が多いため
    前に進もうと思います。
    色々と教えて頂き、本当にありがとうございます。

    一つの結果を得る為に、その結果に行き着く道は 大抵たくさんあります。

    前に進んでください。

    blogは、kiki222さんの質問をきっかけに私自身の捻出力を試してみようと思い書いたメモです。

    kiki222さん流の解決方法に至ってよかったですね。

    解決で良ければ、解決済みにしておいてください

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「ショートコード利用で、classを与えたい」には新たに返信することはできません。