wordpressで投稿エリアに記述したときの表示は、なぜおかしくなる？

Question

###■質問です
wordpressで投稿エリアに記述したとき、このタブが横でなく縦に表示されてしまうのはなぜでしょうか？

###■実際にこうなります
実際にwordpressでやるとこのように、タブが縦にならんでしまいます。

###■ためしてみました
【テンプレートファイルに書くと正常に表示されました】
①上のHTMLコードをsingle.phpに直に貼り付けたときは大丈夫でした。

【投稿エリアに書くと全部タブが縦になってしまいます】
②フレックスボックスをやれば横になりますが、コンテンツが開きません。
③４、５個ほど手持ちのテーマで試したけど全部これと一緒で縦でした。
④single.phpの中身は、the_content();とヘッダーフッターだけにした状態でも書きましたが、やはり縦でした。
⑤すべての空白を削除したのですが、縦でした。

###■ソースはこちらです
ちなみにこちらのコリスさんのをコピペしました。

Comments

[退会済みユーザー]

あなたのソースをみずにしてきできるエスパーはいない。　

[退会済みユーザー]

いえいえ、このまんまですよ。最初のリンク先にあるやつをそのまんまです。これです。https://jsfiddle.net/xczo90ea/

[退会済みユーザー]

style.cssに書いたのも、single.phpに書いたのも、このまんまです☆

[退会済みユーザー]

でもタブが縦になっちゃうんです。ちょっとやってみてくださいまし。

[退会済みユーザー]

あとリンクにはリンク用の記述方法でオートリンクはされませんので

[退会済みユーザー]

手間だなぁっていつも思ってたんです！リンク用の記述、、ですか。ちょっと調べて今後気を付けます。ご指摘どもども('◇')ゞ

[退会済みユーザー]

リンク用の記述方法、発見しました。これから使っていきますね♪

[退会済みユーザー]

解決しましたよ~(＾◇＾)ご報告まで。

Answer 1

タブの横並びは該当箇所のソースを見比べると分かりますが、山ほど不要なp要素が入ってますね。そのせいですね。

<!-- 理想 -->
<ul id="tabs-list">
    <!-- MENU TOGGLE -->
    <label id="open-nav-label" for="nav-ctrl"></label>
    <li id="li-for-panel-1">
      <label class="panel-label"
             for="panel-1-ctrl">タブ 1</label>
    </li><!--INLINE-BLOCK FIX
 --><li id="li-for-panel-2">
      <label class="panel-label"
             for="panel-2-ctrl">タブ 2</label>
    </li><!--INLINE-BLOCK FIX
 --><li id="li-for-panel-3">
      <label class="panel-label"
             for="panel-3-ctrl">タブ 3</label>
    </li><!--INLINE-BLOCK FIX
 --><li id="li-for-panel-4">
      <label class="panel-label"
             for="panel-4-ctrl">タブ 4</label>
    </li><!--INLINE-BLOCK FIX
 --><li id="li-for-panel-5">
      <label class="panel-label"
             for="panel-5-ctrl">タブ 5</label>
    </li>
    <label id="close-nav-label" for="nav-ctrl">Close</label>
</ul>

↓

<!-- 現実 -->
<ul id="tabs-list">
    <!-- MENU TOGGLE --><br>
    <label id="open-nav-label" for="nav-ctrl"></label><p></p>
<li id="li-for-panel-1">
      <label class="panel-label" for="panel-1-ctrl">タブ 1</label>
    </li>
<p><!--INLINE-BLOCK FIX
 -->
</p><li id="li-for-panel-2">
      <label class="panel-label" for="panel-2-ctrl">タブ 2</label>
    </li>
<p><!--INLINE-BLOCK FIX
 -->
</p><li id="li-for-panel-3">
      <label class="panel-label" for="panel-3-ctrl">タブ 3</label>
    </li>
<p><!--INLINE-BLOCK FIX
 -->
</p><li id="li-for-panel-4">
      <label class="panel-label" for="panel-4-ctrl">タブ 4</label>
    </li>
<p><!--INLINE-BLOCK FIX
 -->
</p><li id="li-for-panel-5">
      <label class="panel-label" for="panel-5-ctrl">タブ 5</label>
    </li>
<p>    <label id="close-nav-label" for="nav-ctrl">Close</label>
</p></ul>

###追記
ラジオボタンの箇所です。
これもp要素で囲まれていますね。

<!-- 理想 -->
<input id="panel-1-ctrl"
       class="panel-radios" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl"
       class="panel-radios" type="radio" name="tab-radios">
<input id="panel-3-ctrl"
       class="panel-radios" type="radio" name="tab-radios">
<input id="panel-4-ctrl"
       class="panel-radios" type="radio" name="tab-radios">
<input id="panel-5-ctrl"
       class="panel-radios" type="radio" name="tab-radios">
<input id="nav-ctrl"
       class="panel-radios" type="checkbox" name="nav-checkbox">

↓

<!-- 現実 -->
<p><!-- TAB CONTROLLERS --><br>
<input id="panel-1-ctrl" class="panel-radios" name="tab-radios" checked="" type="radio"><br>
<input id="panel-2-ctrl" class="panel-radios" name="tab-radios" type="radio"><br>
<input id="panel-3-ctrl" class="panel-radios" name="tab-radios" type="radio"><br>
<input id="panel-4-ctrl" class="panel-radios" name="tab-radios" type="radio"><br>
<input id="panel-5-ctrl" class="panel-radios" name="tab-radios" type="radio"><br>
<input id="nav-ctrl" class="panel-radios" name="nav-checkbox" type="checkbox"></p>

#panel-1が開く際のコンテンツ部分のCSSはこうなっています。

#panel-1-ctrl:checked ~ #panels #panel-1 main {
    max-height: initial;
    opacity: 1;
    padding: 48px 24px;
}

#panel-1-ctrlにチェックが入ると表示させまっせと。
問題は~。
これは兄弟要素を指定する間接セレクタです。
兄#panel-1-ctrlと弟#panelsの関係でなくてはならないのですが、pで囲まれてしまっているので#panel-1-ctrlの兄弟と呼べるものは#panel-2-ctrl～#panel-5-ctrlだけ。
#panelsは親父pの弟という関係です。
解決するには、どこからか現れた親父pを削除します。

Comments

[退会済みユーザー]

出力されたソース！なるほど。全くその発想がありませんでした。(見てもわかりませんけれど)

じゃん！無事に横並びに！
http://wordpolice.org/2016/10/27/7/
…と思いきゃ、中身のコンテンツ１~コンテンツ５がない。笑

そんなときは、出力されたソースですね。どこがいけないんだろう。見てみます。

[gin]

コンテンツ部分の追記しておきました。
ラジオボタンのほうに原因があります。

[退会済みユーザー]

どこからか現れた親父wwwいまさらやってきて何を主張してるんでしょうかね！迷惑な親父です！！怒

CSSのご解説もありがとうございます！
そんなCSSの意味、さっぱり知りませんでした。
最近nth-childを覚えたんですが、いろいろありますな~。

しかし…親父に話もどりますけれど、投稿画面から入力する限り冒頭に<P>がついてしまうのは避けられないみたいですね。本当にふてぶてしい親父ですね！！(←気に入ったw)

functions.phpから自動整形機能の禁止とかいうやつをやってみるしかなさそうですね。
ちょっとチャレンジしてみます。

[退会済みユーザー]

じゃーんじゃじゃーん！
http://wordpolice.org/2016/10/27/4/
無事表示されましたぁ！！

Pタグ自動挿入だなんて、全く知りませんでした。解決まで親身になってご対応くださり、本当にありがとうございますっm(__)m

Answer 2

wordpressの「自動整形機能」に問題がありました。
functions.phpにこちらの２行を追記して「Pタグの自動挿入機能」を停止して、問題解決！

remove_filter ( 'the_content', 'wpautop' );
remove_filter ( 'the_excerpt', 'wpautop' );

ご指導いただいたginさん、kei344さん、iiieさん！
みなさま、まことにありがとうございます！！

自己解決では全くないのですが、他の方がすぐに正解がわかるように書いておきます。

※※※　追　記　※※※
※上記のようにfunctions.phpで機能を停止すると、
※過去記事のPタグやbrタグまで消えてしまいます。
※みなさま、気を付けましょう！
※どう気を付けたらいいか、、ただいま模索中ですが、
※とにかく！気を付けましょう。。泣
※※※※※※※※※※※

Comments

[kei344]

それをすると過去の記事の改行がなくなる可能性がありますよ。（全記事をHTMLで書いているなら特に問題ありません）
私なら改行を行いたくない箇所と行う箇所をわけて処理します。特に改行を行わないエリアはカスタムフィールドを使用しますね。

[退会済みユーザー]

こんばんは。kei344さん…なんでいつも先回りなさるんですか…笑

ほんと、ご指摘のとおりで、いま過去記事の改行があちこちなくなっていて、ひとりで笑っていたところなんですww
カスタムフィールドで対応できるものなのですね。ふむ～。

ま、ちょうどサイトを一新しようと思っていたところだしね！！と、ポジティブにとらえつつ、今夜も徹夜なのでした…

Answer 3

<li>タグの間のpタグが原因ですね。 wordpressは投稿エリアが自動で整形されるのでそれが問題だと思います。

固定ページのテンプレートファイルで作るのはどうでしょうか？

Comments

[退会済みユーザー]

仰るとおりのようでした。勝手に自動整形とかいうのをするみたいで、こまったものです。
なんとかｐタグを消してみたけれど、今後は中身のコンテンツが表示されてない…
悪戦苦闘です。

>固定ページのテンプレートファイルで作るのはどうでしょうか？
についてですがそうすると、個々のページに対応させてテンプレートの『当該箇所』を変えるようにしなければならず、そのテクニックがありませんのです(´;ω;｀)
投稿全部がテンプレートに書いた『コンテンツ１』になっちゃう。笑
でもアイディアをありがとうございます。

[退会済みユーザー]

自動整形機能を禁止してなんとか解決できました。
みなさまよくわかりますな。
ご回答いただきまことにありがとうございます！

Answer 4

記事の投稿エリアに記述していると推測します。
全てのタブ／インデント改行を削除してみてください。

Comments

[退会済みユーザー]

仰る通りです。single.phpに直に書くと、正常に機能します。
投稿エリアに書くと何が問題なのでしょうか…？

いちおうご指摘のところは削除して、質問の「■ためしてみました」の⑤に追記してみました。

まぁ、タブの機能なんて他にもありますしね。
これはかっこいいけどあきらめよっかな…

[kei344]

質問内容が変わっています。

[退会済みユーザー]

はい。汎用的にしてみました。だ、ダメでしたか？(; ･`д･´)リンゴについて聞くなら、フルーツについてっていう方向に内包させてみたんですが…

[kei344]

「wordpress 自動整形」で検索。

[退会済みユーザー]

さすが。kei334さんはなんだかんだで厳しさという優しさの持ち主。笑
見に行ってみます!!どれどれ…

[退会済みユーザー]

ご指摘のとおりでした！
一見して正解でしたね。さすがすぎる…笑

その後、自動整形の禁止で一発解決。
ただ、今回は理由などご教示いただいたginさんにベストアンサーとさせていただきました。
いつもありがとうございますm(__)m