- 締切済み
wordpress キャプションが<p>として吐き出される
Limit Posts jaというプラグインを入れ、topページに記事(200文字まで)一覧を表示しています。 (PHPソース) <div class="box clearfix"> <?php echo tb_post_thumb(true);?> <div class="cts-list"><?php the_content_limit(200, "続きを見る"); ?></div> </div> これで投稿記事の画像と文章（200文字まで）を取得しているのですが、 画像のキャプションが文章として吐き出されているのです。 投稿記事のページでは、ちゃんとキャプションとして扱われているのですが。。 （HTMLソース） <div class="box clearfix"> <img src="http://www." width="90" height="90" alt="" /> <div class="cts-list"> <p>キャプションここに文章が入ります...<a href='http://www.//省略/?p=87'>続きを見る</a></p> </div> </div> キャプションが平然とした顔で<p>タグに囲まれてます......泣 なんとか一覧ページでキャプションが文章としてではなく、キャプションとして認識させれないでしょうか？ なんでもいいです。 文章とは別物として扱えるようになれば。。 記事のページのHTMLソースも載せておきます。 <div class="box clearfix"> <div id="attachment_88" class="wp-caption aligncenter" style="width: 345px"> <img class="size-medium wp-image-88" title="ピクチャ 3" src="http://www" alt="ピクチャ 3" width="335" height="212" /> <p class="wp-caption-text">キャプション</p></div> <p style="text-align: center;"><p>ここに文章が入ります</p> </div> 宜しくお願いしますっ！！！！困ってます！！！すみません！！
- momomobull
- お礼率0% (0/1)
- PHP
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
--以下コピペ-- 記事のページのHTMLソースも載せておきます。 <div class="box clearfix"> <div id="attachment_88" class="wp-caption aligncenter" style="width: 345px"> <img class="size-medium wp-image-88" title="ピクチャ 3" src="http://www" alt="ピクチャ 3" width="335" height="212" /> <p class="wp-caption-text">キャプション</p></div> <p style="text-align: center;"><!--<p>-->ここに文章が入ります</p> </div> ↑これは、ＰＨＰで作成されたＨＴＭＬですか？ <!--<p>--> ←それでこれが問題の<p>ですか？
関連するQ&A
- [wordpress] 固定ページで、カテゴリ名の
[wordpress] 固定ページで、記事の一覧を表示し、その記事の属するカテゴリ名の表示 wordpressで、商品一覧ページを作成していて、一覧を表示するページは固定ページにしています。 その商品一覧の中で、記事(商品)の属するカテゴリ名を表示させたいのですが どうすればいいでしょうか？ 商品が服なので、その商品が属するカテゴリを項目の一つとして出力したいのです。 つまり『抽出した商品毎(have_post()の出力結果)にカテゴリ名を抽出』という感じです。 具体的なソースも教えて頂けると助かります。 <?php the_category(); ?> はダメでした。 [参考ソース] <div id="collectionWrap" class="clearfix"> <?php $loop = new WP_Query( array( 'post_type' => 'collection', 'posts_per_page' => 8 ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <div class="collection"> <div class="image"> <a href="<?php the_permalink() ?>"><?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),'medium' ); ?></a> </div> <div class="txt"> <div class="clearfix mb10"> <p class="upDate"><?php echo get_post_meta($post->ID,"性別",true); ?></p> <p class="seasons"> <span> /*ここにカテゴリの種類を出力 */ </span></p> </div> <p class="itemName"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p> <p class="itemPrice">¥ <?php echo get_post_meta($post->ID,"価格",true); ?></p> </div> </div> <?php endwhile; ?> <?php wp_reset_query(); ?> </div> どうかよろしく御願いします。足りない情報等あればおっしゃってください。 自分でもいろいろ調べてるのですが、わかりません。。急いでます。
- ベストアンサー
- PHP
- 横に並んだ画像の固まりをセンター
下記CSSでキャプション付き画像を横向きに並べて配置したのですが 横に並んだ画像の固まりをセンターにもっていくCSSがわかりません どなたか知りませんか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> <!-- div.imagebox { border: 1px dashed #0000cc; /* 1.枠線 */ background-color: #eeeeff; /* 2.背景色 */ } p.image, p.caption { text-align: center; /* 3.中央寄せ */ margin: 0px; /* 4.余白・間隔 */ } p.caption { font-size: 80%; /* 5.文字サイズ */ color: darkblue; /* 6.文字色 */ } div.imagebox { border: 1px dashed #0000cc; /* 枠線 */ background-color: #eeeeff; /* 背景色 */ width: 140px; /* 横幅 */ float: left; /* 左に配置 */ margin: 5px; /* 周囲の余白 */ } .imagebox_a { display: block; margin-left: auto; margin-right: auto; } --> </style> </head> <body> <div class="imagebox_a"> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> </div> </body> </html>
- ベストアンサー
- CSS
- 画像の下部にキャプションを入れる
現在スマホサイトを作成しています。 そこに掲載する画像の下部にキャプションを入れたいと思っています。デザインでいうと下記サイトに掲載されているようなキャプションです。 http://subculsheets.blog.fc2.com/blog-entry-19.html 上記のサイトと違う点は画像の周りに5pxの白い枠を作成したこと、画像のキャプションには半透明の黒い画像を予め作成し背景として使用していることです。 スマホサイトの場合は、縦で見る時と横で見る時で横幅が変わります。 何となくはできたのですが、現在は縦画面で見た時にキャプションが2px程右にはみ出してしまっています。横画面で見るとちゃんと収まっています。 キャプションをつける画像のサイズは統一して380px×265pxの画像を使用しています。 下記が現在のコードです。 HTML----------------------------------------------------------- <div class="photo-center2"> <img src="../img/○○.jpg"> <div class="caption-txt2">キャプションテキスト</div> </div> --------------------------------------------------------------- CSS----------------------------------------------------------- .photo-center2 img{ width:100%; max-width:380px; } .photo-center2{ position: relative; border:1px solid rgb(204, 204, 204); padding: 5px; background-color:#ffffff; margin:0 auto; margin-bottom: 15px; width:90%; max-width:380px; } .caption-txt2{ position: absolute; color: #fff; padding: 5px; font-size: 12px; bottom: 9px; background-image: url("../images/caption.png"); text-align:center; width:95%; max-width:382px; } ------------------------------------------------------ どのように修正すれば縦画面で見た時もキャプションをはみ出さずに済むでしょうか？ ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。
- ベストアンサー
- CSS
- 特に指定する値がない場合のcssについて
現在作成しているホームページで、以下のようなソースを書きました <div id="wrapper"> <div class="box1 clearfix"> <div class="right1">floatで右寄せ</div> <div class="left1">floatで左寄せ</div> </div> <div class="box2 clearfix"> <div class="right2">floatで右寄せ</div> <div class="left2">floatで左寄せ</div> </div> </div> 初めは特にdivを入れ子にする必要はないと思っていたのですが clearfixの指定をかけるには必要だったので、<div class="box">で囲むことにしました。 ですが、box1やbox2に、特に指定する値がなくて悩んでいます。 特に指定することがない場合にはcssには何も書かなくてよいものなのでしょうか？ 今は取り敢えず何か指定してないと落ち着かない気がして width指定だけ書いているのですが、幅はwrapperで指定していますし特に必要ない気もします。 このような場合には何も指定をしないか、取り敢えずwidthだけでも指定しておくかどちらの方が良いのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- wordpressでショートコードが表示される
wordpressでTCDの有料テーマDynamicを使用しております。（以下サンプルサイト） http://design-plus1.com/tcd-w/tcd009 wordpressには４つのショートコードがあるそうですが、そのうちの１つ、キャプション（画像につける説明文）を入れると以下のようにショートコードで表示されます。 [caption id="attachment_●●●●" align="alignleft" width="150"]<a href="リンク先の画像URL"><img src="表示する画像URL" alt="●●●●" width="150" height="150" class="size-thumbnail wp-image-●●●●" /></a> <span style="font-size: 8pt;">キャプション本文</span>[/caption] この[caption id="attachment_●●●●" align="alignleft" width="150"]の部分がトップページの記事タイトルの下の本文内容部分に表示されてしまいます。（添付写真参照） これを消すにはどこをいじればいいでしょうか？
- 締切済み
- PHP
- 現在作成しているページで、一部をPHPで記述するようにしているのですが
現在作成しているページで、一部をPHPで記述するようにしているのですが、 一度記述したPHPの部分のみをボタンをクリックしたら削除して 新たなPHPを呼び出したいと考えています。 HTMLソースを表示します。 <div class="box009"> <div class="box009inner"> <div class="box009m"> <?php require_once("./work/twitter.php"); twitter_serch(jsports,20); ?> <p class="mt10"><a href="#"><img src="img/button005.gif" width="629" height="40" alt="もっと読む" /></a></p> </div><!-- /box009m --> </div><!-- /box009inner --> </div><!-- /box009 --> このPHPの部分で記述している部分のみを削除したいのですが、 その場合はどのように記述すればよいでしょうか？ よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- wordpress カスタム投稿タイプについて
カスタム投稿タイプにより、カタログサイトを作っているのですがwp-pagenaviがページ送りがうまくいきません。phpはよくわからないのでご指導いただければと書き込みました。 状況は下記の通りです。 ■index-frame.php (カスタムテンプレートとして、フレームカタログ一覧を表示。wp-pagenaviはこのphp内に表記しています。） パーマリンクは/%category%/%post_id%/ に設定 index-frame.phpによりサムネイルを表示させ、wp-paginaviでページ送りするとカスタム投稿タイプから投稿済みの別のサムネイルを表示させたいのですが、そうならず、index.phpが使用されてカスタム投稿タイプのタイトルと本文が表示されてしまいます。 サイトＵＲＬ （”フレーム”に関しての表示部分です。） http://cm-creation.net/yoshida/localwork/megane-catalog/frame/ index-frame.phpの表記は下記のとおりです。 <?php /* Template Name:インデックス・フレームのテンプレート */ ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name');?><?php wp_title(); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"/> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="head-section"> <div id="header"> <h1><a href="#"><?php bloginfo('name'); ?></a></h1> </div> </div> <div id="wrapper-section"> <div class="clearfix" id="wrapper"> <!--カテゴリーナビ用フレーム強調--> <div id="cate_navi_container"> <?php wp_nav_menu(array( 'theme_location' => 'framebar', 'link_before' => '<img src="' . get_bloginfo('template_url') . '/images/', 'link_after' => '" alt="*" />' )); ?> </div> <!--サイドメニュー用--> <div class="clearfix" id="side-container"> <div id="sidebar"> <?php wp_nav_menu(array( 'theme_location' => 'sidebar', 'depth' => '2' )); ?> </div> </div> <!--メインコンテンツ用--> <div class="clearfix" id="main-container"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="title"> <h2><?php the_title(); ?></h2> <?php the_content(); ?> </div> <?php endwhile; endif; ?> <div class="itemlist"> <?php query_posts('post_type='.$post->post_name); ?> <?php if(have_posts()): while(have_posts()): the_post(); ?> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('ssize'); ?> </a> <?php endwhile; endif; ?> </div> <div id="pagenavi"> <!--ロールナビゲーション--> <div id="roll"><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { vicuna_paging_link('next_label=Newer Entries&prev_label=Older Entries&indent=2'); } ?> </div> </div> </div> </div> </div> <?php get_footer(); ?> カスタム投稿タイプとwp-pagneviの問題についてネットで見ましたが、すいません、phpについてよくわかっておらずどこをどう表記変更したら良いかわからずにおります。よろしくお願いいたします。
- ベストアンサー
- PHP
- WordPressで孫ページ一覧を取得
下記のコードで子ページ一覧を取得していたのですが、子ページ一覧ではなく孫ページ一覧を取得する必要が出てきました。 <?php $parentId = get_the_ID(); $args = 'posts_per_page=-1&post_type=page&orderby=menu_order&post_parent='.$parentId; query_posts($args); if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="child-box"> <a href="<?php the_permalink(); ?>"><img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" width="190" alt=""></a> <p class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p> <p>価格:<span class="price"><?php $selling_price = get_field('selling_price'); echo $selling_price."円"; ?></span></p> </div> <?php endwhile;?> <?php wp_reset_query(); ?> <?php else:?> <?php endif;?> 上記のような形で孫ページ一覧を取得する方法をご存知のかた、是非ご教授ください。
- ベストアンサー
- PHP
- androidで各heightの値
androidで下記のようにCSSの同じクラス名でheightの幅が変動する場合、 javascriptで各heightの値を var image_width = $(".image_brok").height(); のように取得したいのですがどうすればいいでしょうか？ <div class="image_brok"> <div class="image"><img src="./photo.jpg" alt="海の写真" class="image_set"></div> <div class="caption">キャプションですよ</div> </div> <div class="image_brok"> <div class="image"><img src="./photo1.jpg" alt="海の写真1" class="image_set"></div> <div class="caption">キャプションですよ</div> </div> <div class="image_brok"> <div class="image"><img src="./photo2.jpg" alt="海の写真2" class="image_set"></div> <div class="caption">キャプションですよ</div> </div> <div class="image_brok"> <div class="image"><img src="./photo3.jpg" alt="海の写真3" class="image_set"></div> <div class="caption">キャプションですよ</div> </div>
- ベストアンサー
- JavaScript
- Lightbox2でのキャプションについて
画像の拡大表示のために、Lightbox2を使用しております。 画像のキャプションとして、title属性内にHTMLで装飾した長い文章を入れています。 しかしLightboxのキャプションはtitle属性であるため、（当然ですが）サムネイル画像にマウスカーソルを置いたときにブラウザが表示するポップアップにおいて、キャプション用文章のHTMLタグまで表示されてしまってみっともないです。 出来ればtitle属性は本来の使い方にしておいて、Lightboxのキャプション専用の属性を新たに加える・・・というような感じにするには、どのように改造したら良いでしょうか？ ソースは以下のような感じです。 ●現状 <a href="/image/test.jpg" rel="lightbox" title="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> ●理想（こんな感じに出来たらいいなぁというイメージです） <a href="/image/test.jpg" rel="lightbox" title="テスト画像" caption="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> おそらくlightbox.jsのどこかをいじるのだと思いますが、試しに218行目の imageLink.title を imageLink.caption に書き換え、さらに223行目の anchor.title を anchor.caption に書き換えてみましたが、ダメでした。（JavaScriptの知識がゼロのため、まったく的外れなことをしているかもしれません） 他に何か良い方法はありますでしょうか？
- ベストアンサー
- JavaScript
補足
phpで生成されたhtmlです。 記事のページはちゃんとキャプションと文章が別れているのですが,,,,, 問題の<p>は2番目に書いたソースです。 （HTMLソース） <div class="box clearfix"> <img src="http://www." width="90" height="90" alt="" /> <div class="cts-list"> <!--<p>-->※キャプション※ここに文章が入ります...<a href='http://www.//省略/?p=87'>続きを見る</a> <!--</p>--> </div> </div> <!--<p>-->から <!--</p>-->に※のキャプションと文章が一緒になっている、というのが問題です。 どうか宜しくお願いします！！