WordPressのHTMLエディタでの投稿方法について

このQ&Aのポイント
  • WordPressのHTMLエディタで投稿をする際に、ビジュアルエディタとHTMLエディタの切り替えがうまくできず、タグが繋がってしまう問題が発生しています。
  • 最新のWordPressを使用し、エディタ関係のプラグインとしてFCKEditor 3.3.1を利用しています。
  • この問題に対して、打ち込んだままに表示させる方法はあるのでしょうか?
回答を見る
  • ベストアンサー

WordPressのhtmlエディタについて

WordPressのhtmlエディタで投稿をしているのですが <div> <img src="×××.gif" alt="××××××" /> </div> と入力して更新するとビジュアルエディタになり それをまたhtmlエディタで表示させると <div><img src="×××.gif" alt="××××××" /></div> とすべてが繋がってしまいます。 2~3行だけが繋がるのなら良いのですが 打ち込んだタグ全部が繋がってしまうので困ってます。 打ち込んだままに表示させる方法ってありませんでしょうか? 使用しているのは最新のWPでエディタ関係のプラグインは FCKEditor 3.3.1を使用しています。

  • PHP
  • 回答数3
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • bm_hiro
  • ベストアンサー率51% (200/388)
回答No.3

ごめんなさい。俺には無理そうです。 いろいろ調べてみて、分かった事は以下の通り。 ・ 自動整形という普通に備わっている機能であるということ。 ・ 結構、それに悩まされている人がいるということ。 ・ PS Disable Auto Formatting という自動整形を停止させるプラグインがあるという事。 そして、俺も試したけど、停止してくれなかった事。 一応、頑張ってはみましたが、諦めました。 もしかしたら、参考になるかもしれないページ。↓ http://select.rash.jp/wp/164/

harimaya5
質問者

お礼

諦めた方が早そうですね。 お世話になりました。 いろいろと調べていただいてありがとうございました。

その他の回答 (2)

  • bm_hiro
  • ベストアンサー率51% (200/388)
回答No.2

とりあえず、進捗として今現在 分かった事だけを書きますね。 俺も自分のPCにワードプレスとFCK入れて、現象を確認しました。 結論から言うと、これは仕様だと思われます。 実は DB上には ソースで入力した通りに入っています。 エディタかwrodpress が 再度 読み込むときに 書き換えているようです。 そちらが 補足で提示したテーブル関係のも 入力した覚えのない <tbody>が追加されていますし、たまに 属性値の順番が入れ替わります。 ○再現手順 「ソース」で ↓を入力し、「下書き保存」 <img src="test.gif" alt="gast"> この時点で DBには そのまま 登録されています。 次に また 「ソース」で表示させてみると ↓こうなります。 <p><img alt="gast" src="test.gif" /></p> ちなみに、デフォルトのエディタでも なんらかの整形は加えられてました。 これを どうにかしようと思うと、エディタとwordpressのソースを ちゃんと読まなければいけなくなるかもしれません。 もしかしたら、どこかに設定があるのかもしれませんが、今のところは不明です。

  • bm_hiro
  • ベストアンサー率51% (200/388)
回答No.1

んー、俺の記憶に間違いがなければ、WPのエディタって JavaScriptで書かれてますよね。 補足お願いします。 お使いのOSとブラウザは何でしょ? ブラウザを変えても同じことが起きるでしょうか?

harimaya5
質問者

補足

OSはWindows VistaでブラウザはIE8です。 foxでもchromeでも試しましたが同じでした。 先ほどの <div> <img src="×××.gif" alt="××××××" /> </div> を例として書きましたが <div> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </div> こういう感じのテーブルタグだとそのままになってます。

関連するQ&A

  • Wordpressについて困っています。

    Wordpressのプラグイン、AddQuicktagについて、どうしても分からないことがあります。 私は今Wordpressを色々いじくっているのですが、困っている点があります。 まず、ビジュアルエディターの画面でWPに元から付属している文字装飾などを挿入するとビジュアルエディター上で文字に反映されます。 しかし、ビジュアルエディターの画面でAddQuicktagの文字装飾などを挿入すると、何故かこちらはビジュアルエディター上では何も反映されません。(※テキストエディタに切り替えるときちんとタグが入っています) わたしはビジュアルエディターが好きで、自分で好みで入れたAddQuicktagタグをビジュアルエディターで使いたいと思っているのですが、タグを入れても見た目に反映されないのでは、すごくやり辛くて困っています。 そこで質問です。 Q1、ビジュアルエディター上でAddQuicktagを挿入しても見た目には反映されないのはWordpressのそういう仕様なのか? それとも私が何かマズイことをしてしまったのか Q2、もしビジュアルエディター上でもAddQuicktagが反映されるのであれば、何をどう設定すればそうなるのか? 長くなってしまいましたが、どなたか分かる方がいらしたら教えて頂けると幸いです。

  • wordpressで

    wordpressを使ってブログを作っています。しかしcssを読み込んでくれません。 index.phpの内容は <!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="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(': '); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>(RSS 2.0)" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?>(Atom)" href="<?php bloginfo('atom_url'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> </head> <body> <div id="rap"> <div id="header"> <div id="headerimg"> <h1><a href="<?php echo get_settings('home'); ?>/"><img src="img/title.gif" alt="芦澤治療院はやさしいマッサージで施術いたします。" /></a></h1> </div> <div id="headernavi"> <div id="navi"> <ul> <li><a href="#"><img src="img/link.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/sitemap.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/inquary.gif" alt="" border="0" /></a></li> </ul></div> <div id="size"> <img src="img/sizeword.gif" alt="" /> <a href="#"><img src="img/sizesmall.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizemiddle.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizebig.gif" alt="" border="0" /></a></div> </div> </div> <div id="navcontainer"> <ul> <li class="news"><a href="#">ニュース</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="work"><a href="#">施術の案内</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="stuff"><a href="#">スタッフ</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="qa"><a href="#">よくある質問</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="inq"><a href="#">お問い合わせ</a></li> </ul> </div> <!-- end header --> <div id="content"> <div id="main"> <?php if(have_posts()):while(have_posts()):the_post();?> <div class="post"> <h2><?php the_title();?></h2> <?php the_content();?> <p class="postmetadate"> <?php the_time('Y年m月d日 H:i')?>|<?php comments_popup_link ('コメント(1)','コメント(2)','コメント(%)');?> </p> </div> <?php comments_template();?> <?php endwhile;endif;?> </div> </div> </div> </body> </html> です。 ディレクトリ構造はindex.htmlとstyle.cssは同じフォルダにあります。

    • 締切済み
    • PHP
  • CSSで横並び

    divタグ内のimgタグを横並びに表示するCSSは、 .container cf{ display:flex; } で合っていますか? <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>

    • ベストアンサー
    • CSS
  • 横並びにするCSS

    以下のdivタグ内のimgタグを横並びに表示するCSSは .container{ display:flex; } で合っていますか? <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>

    • ベストアンサー
    • CSS
  • Wordpress ブロックエディタが分からない

    Wordpressで(おそらく)ブロックエディタというのがよくわかりません。 4年前くらいまでは、WPで自分の仕事のHPを作ったりしていたのですが、数年遠ざかっているうちに、最近やろうとしたら操作がよく分からなくなりました。 Localでローカル環境を用意して、あるWPのテーマとそのデモを入れてみました。そしてそのページを編集しようとしたら、 1)編集段階でのページ(貼り付け)と、 2)プレビューでみる、そのページとに、 相違があり、原因がよく分かりません。2はひととおり分量の多いコンテンツが表示されますが、1)だと、上部のタイトルと文章、それから右のほうのメニューのようなところに、背景の画像は出てくるのですが、それより下のコンテンツがどこに出てくるのかよくわかりません。 コンテンツ全体(下の方)は、どのようにして編集するのでしょうか? 以前であれば、visual composer でしたか、便利だけど、更新その他でリスクも高いといわれていたプラグインがあり、感覚的に分かり易かったりしたので、ページによって、時々使っていました。 そういったものとはだいぶ違うようなのですが、上記教えていただけるとありがたいです。

  • 上下の間隔を10px分空けたい

    以下のHTMLで、Mozilla, Safariでは、上下10px分離れた間隔で画像が表示されますが、IE6,IE7では<br>したのと同等の距離になります。 IEでも上下10px分の間隔で表示させるには、どのようにすればよいのでしょうか? 私が<div>の意味が良く分かっていない為でしょうか? <div><img src="a.gif" alt=""></dirv> <div><img src="spacer.gif" alt="" width="1" height="10"></dirv> <div><img src="b.gif" alt=""></dirv>

    • ベストアンサー
    • HTML
  • 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> 宜しくお願いしますっ!!!!困ってます!!!すみません!!

    • 締切済み
    • PHP
  • WordPressのtag.phpのループ回数

    WordPressでタグの一覧ページtag.phpを作成してループを読み込ませたのですが、10記事しか表示されません。ループ部分のコードは以下のとおりです。 <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div> <a href="<?php the_permalink();?>" title="<?php the_title_attribute(); ?>"><img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt=""></a> <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p> </div><!-- /.child-box --> <?php endwhile;?> <?php else:?> <?php endif;?> 該当する記事は40ほどあるのですが、違うタグで試してもやはり10記事しか表示されません。 色々と試したのですが原因がわかりません。ご教授いただけませんでしょうか。

    • ベストアンサー
    • PHP
  • wordpressのimgに設置したsvgが非表示

    wordpressでサイトを作っています。imgタグに設置したsvgファイルが表示されません。どうすれば表示できるか教えていただけますでしょうか? 例えばこのようにimgは設定しています。 <h1><a href="#"><img src="https://www.ishiura-kagu.com/n-image/ishiura_logo.svg" alt=""></a></h1> 参照サイト https://www.ishiura-kagu.com/ishiura-information/ishiura-case/ 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • JavaScriptを用いた文字列置換

    JavaScriptを用いて、以下のようなことが可能でしょうか。 <div class="test"> <A Href="http://xxx"> <Img Src="hoge.gif"> </A></div> 上記タグを下記タグに置換したいです。 <div class="test"> <Img Src="hoge.gif"> </div> ようはAタグを丸々削除したいのですが、JavaScriptで可能でしょうか。 お分かりの方お教え下さい。

専門家に質問してみよう