WordpressとCodepen(html/css/Jquery)で同様の記述をした場合でも表示（プレビュー）が異なってしまう

Question

wordpressとcodepenで同様の記述をしているにも関わらず、それぞれにプレビューが異なってしまうのですが、
なぜそのような現象が起きてしまうのでしょうか？
お手数ですが、ご教示くださいませ。
何卒よろしくお願い致します。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

■codepenで記述しているコード
https://codepen.io/UUTUM/pen/dyobYMo

■wordpressで同様の記述をしているコード

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

■ブラウザから[⌘]+[SHIFT]+[U]で表示したhtmlをcodepenに記述したもの
https://codepen.io/UUTUM/pen/GRJRbpR
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

現在、アコーディオンを作成しようと試みており、別でも質問をさせていただいておりますが、
解決しておらず、問題を分解して解決していきたいと考え質問をさせていただきました。

■別の質問ーアコーディオン(html/css/javascript)の実装に関しまして
https://teratail.com/questions/239206

■wordpress上のコード　※htmlの内容はcodepenに記載のものと同様です。（コピペしてます）

Comments

[kei344]

teratailでは質問本文に画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

[Lhankor_Mhy]

「プレビューが異なってしまう」とは、アコーディオンが3つになってしまう、ということですか？
wordpress でのコードをご提示いただけますか？

[UUTUM]

>kei344さま
質問本文に画像アップできる旨、ご教示いただきありがとうございます！
修正対応致しましたので引き続き何卒よろしくお願い致します。

>Lhankor_Mhyさま

>「プレビューが異なってしまう」とは、アコーディオンが3つになってしまう、ということですか？

画像とcodepenのコードが異なり申し訳ございません。
アコーディオンが3つになっていることが問題ではなく、
wordpressの場合、アコーディオンの中に要素が入らずに外に出てしまうことが困っています。
（+−で開けても開いてもアコーディオンの外に要素が飛び出ているので隠れたり表示したりしません）

>wordpress でのコードをご提示いただけますか？
wordpressのコードに関しては、codepenと同様のものを記述しております。
それ以外のもの全てということでしょうか？
お手数ですが引き続き何卒よろしくお願い致します。

[Lhankor_Mhy]

『アコーディオンの中に要素が入らずに外に出てしまう』とのことですが、当方ではその差が視認できませんでした。画像でわかる違いなのでしょうか？

また、『+−で開けても開いても』とのことですが、「+-」とはなんですか？

[UUTUM]

Lhankor_Mhyさま

>『アコーディオンの中に要素が入らずに外に出てしまう』とのことですが、当方ではその差が視認できま>せんでした。画像でわかる違いなのでしょうか？

画像とcodepenを比較しても確認出来る違いになります。
画像では、+−で開閉した時にどちらも要素が外に飛び出してしまっている状態を載せております。

>また、『+−で開けても開いても』とのことですが、「+-」とはなんですか？
+−はアコーディオンの開閉のトグル？ボタン？のことを指しております。
アコーディオンの右に配置しているものです。

■codepenで記述しているコード
https://codepen.io/UUTUM/pen/dyobYMo

わかりづらい説明で申し訳ございませんが、引き続き何卒よろしくお願い致します。

[Lhankor_Mhy]

> アコーディオンの右に配置しているものです。

おお、薄くて気づきませんでした。失礼しました。

> 画像とcodepenを比較しても確認出来る違いになります。

そうなんですね、見比べてもまったく違いがわからない……
こりゃ眼科にでも行った方がいいかな……

[Lhankor_Mhy]

あ、もしかして、-になっているのにアコーディオンが閉じない（トグルしない）ってことですか？

[Lhankor_Mhy]

そうだとすると、イベントは動作しているけど、slideToggle() だけが動作していないってことですよね。
とすると、おそらくアニメーション機能を削除した jQuery-slim を使っているんじゃないでしょうか。

jQuery を読み込んでいる部分をご提示いただけますか？

[UUTUM]

Lhankor_Mhyさま

>あ、もしかして、-になっているのにアコーディオンが閉じない（トグルしない）ってことですか？

はい。要素が閉じなくて困っております。トグルしない＝要素が格納されない
という意味でならばトグルしません。
ただ、+から−へ切り替わるというような挙動はします。

[Lhankor_Mhy]

そうでしたか。

では、jQuery を読み込んでいる部分をご提示いただけますか？

[UUTUM]

Lhankor_Mhyさま

お待たせ致しました。
以下がJQueryで書き込んでいる箇所になります。
お手数をおかけいたしますが、ご確認何卒よろしくお願いいたします。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<!--jqueryを読み込む-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--JSトグル-->
<script type="text/javascript">
$(function(){
$(".accordion li a").on("click", function() {
$(this).next().slideToggle();
if ($(this).children(".accordion_icon").hasClass('active'))
{
$(this).children(".accordion_icon").removeClass('active');
}
else
{
$(this).children(".accordion_icon").addClass('active'); }
});
});
</script>

[Lhankor_Mhy]

うーん、予想は外れましたか……

一応念のため確認ですが、jQuery を読み込んでいるのは一度だけですよね？

そうするとあとは、このHTMLコードは、どこに表示させているか教えていただけますか？
記事ページですか、個別ページですか？

[UUTUM]

>一応念のため確認ですが、jQuery を読み込んでいるのは一度だけですよね？
確認しましたが、1度だけです。
ちなみに以下を削除してもトグルが動くんですが、それって別にJquery読み込んでいるってことですかね？（wordpressのそもそもJqueryが影響しているんでしょうか？）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<!--jqueryを読み込む-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
記事ページですか、個別ページですか？
wordpress[固定ページ]より[新規追加]でhtmlを記述しています。

[Lhankor_Mhy]

> ちなみに以下を削除してもトグルが動くんですが、それって別にJquery読み込んでいるってことですかね？

ですね！

実物を見せてもらえるなら話が早いんですが、難しいですよね？

[UUTUM]

Lhankor_Mhyさま

やはりそうですか...それが悪さしている可能性があるってことですかね？

実物というのは、製作しているページのurlを共有することは可能ですが、
wordpressのpassやアカウントをそのままお伝えすることは難しいです。
色々とご協力いただいているのに大変失礼なお話で申し訳ないですが...

[Lhankor_Mhy]

↓ちょっと変更しました。

alert( $('p').next().html() ); ←これを挿入
$(this).next().slideToggle();

とするとどうなりますか？

[UUTUM]

>alert( $('p').next().html() ); ←これを挿入
>$(this).next().slideToggle();

いただいたもの追加したら、トグルを押したらアラートが出るようになりました。
以下のような内容です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
xxx.comの内容
<span></span><span></span>

[OK]
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ご確認よろしくお願いいたします。

[Lhankor_Mhy]

この、

<span></span><span></span>

はご提示のコードにないと思いますが、どこにあるものですか？

というか、HTMLで編集していないため、余分なタグを差し込まれていませんか？
https://ko-onshitsu.com/ehtmltocsswo-bian-jisuru-fang-fa/

[UUTUM]

><span></span><span></span>
>はご提示のコードにないと思いますが、どこにあるものですか？

私が提示させていただいているコードは以下のものだと思いますが、
その点認識合っておりますでしょうか？

■codepenで記述しているコード
https://codepen.io/UUTUM/pen/dyobYMo

上記、urlの内容であれば、htmlの欄に<span></span><span></span>の記述はしてあります。

>というか、HTMLで編集していないため、余分なタグを差し込まれていませんか？
>https://ko-onshitsu.com/ehtmltocsswo-bian-jisuru-fang-fa/

wordpress特有の<p><br>の自動挿入・自動削除
タグの自動整形などのことに関してでしょうか？

こちらに関しては、コードエディタで記述しており、自動でコードを
ぐちゃぐちゃにされるのが嫌だったのでプラグインを入れて編集しました。
このwordpressが勝手に編集する問題が原因なのではないかと最初は考えておりました。

[Lhankor_Mhy]

> htmlの欄に<span></span><span></span>の記述はしてあります。

あ、ほんとですね。
しかし、そうだとすると、codepenのコードで同じアラートを出すと、

タイトル（クリックで開閉します）

となるので、同じコードを使っているならば、おかしな話になります。というか、おそらく違うコードになっているはずです。

どうにか、wordpress でのコードを一部で構いませんから、ご提示していただくことはできませんか？

[UUTUM]

Lhankor_Mhyさま

ご確認いただきありがとうございます！
codepenで先ほどのアラートコードを入れた場合と違うエラーが吐き出されるんですね！
なんだか解決にぐっと近づいたような気がします。

>どうにか、wordpress でのコードを一部で構いませんから、ご提示していただくことはできませんか？
もちろん提示することは可能ですが全く同じものをcodepenからコピペしただけのものが、
htmlには貼り付けられております。画像とかのほうがいいでしょうか？

▲少し経緯をお話すると、私は自分の思ったようなアコーディオンがうまく作れなくてこのterarailに辿りつき、質問をしました。そこで別の方から現在のhtmlをいただきcodepen上だと+−が逆だけどなんとなく形になっていたので、それをwordpressにコピペして少しでも自分なりに直せていければと考えたのですがその時、wordpressと表示が異なることを知り、別の質問として今回あげさせていただきました。

------------
■別の質問ーアコーディオン(html/css/javascript)の実装に関しまして
https://teratail.com/questions/239206

[UUTUM]

ちなみに今、全てのコードの開業を削除して、詰めて見た所、
アラートは「タイトル（クリックで開閉します）」に変わりました。

コードの改行（空白箇所）に影響があるようです。
また、それでも、要素が外に飛び出すという問題は解決しませんでした。

[Lhankor_Mhy]

何度も繰り返しになってしまい申し訳ないのですが、現状のwordpressのHTMLコードをご提示いただかないとらちが明かないと思いますです。

[UUTUM]

>何度も繰り返しになってしまい申し訳ないのですが、現状のwordpressのHTMLコードをご提示いただかな>いとらちが明かないと思いますです。

こちら上にあげましたのでご確認お願いいたします。
念のためですが、こちらも何度も繰り返しになりますが、codepenの内容をそのままコピペしただけの内容になります。

お手数ですが何卒よろしくお願いいたします。

[Lhankor_Mhy]

うーん、そうではなくて、実際に表示されて不具合が起きているページのソースを見たいのです。

私の今の気分は、こんな感じです。
https://twitter.com/lhankor_mhy/status/1172074711838150656

「これをコピペしたからこうなってるはず」を貫くなら、「同じソースなら同じ結果が出るはずです」とお答えするしかないですよ？

[UUTUM]

>「これをコピペしたからこうなってるはず」を貫くなら、「同じソースなら同じ結果が出るはずです」と>お答えするしかないですよ？

おっしゃる通りだと思います。
ですので上部に画像をあげましたがご確認いただけておりますでしょうか？
それとも画像ではだめということでしょうか？

ページのソースをということであれば、またwordpressの不具合の起きているページからコピペをして張り出して、こちらに掲載するという方法になりますけどその方法でもよろしいでしょうか？

[Lhankor_Mhy]

> それとも画像ではだめということでしょうか？

ですです。

> wordpressの不具合の起きているページからコピペをして張り出して、こちらに掲載する

お願いします！見せられない部分もあると思うので、一部で結構です！

[Lhankor_Mhy]

Ctrl+U で表示させてコピーしてください。

[UUTUM]

wordpressのhtmlを以下に貼りましたのでご確認お願い致します。
※これで認識問題ないかも含めご確認いただけますと幸いです。

・cssとjsはcodepenのままです
・サイトタイトルとかサイトurlは恥ずかしいので伏せさせていただきました。
・サイトに直接書き込もうとしたのですが、文字制限がかかった為codepenに切り替えました。
以上になりますが何卒よろしくお願い致します。

-------
https://codepen.io/UUTUM/pen/GRJRbpR
-------

[Lhankor_Mhy]

十分です！

かなり codepen のコードとは違う感じになっていますね。
おそらく、wordpressのエディタの影響だと思いますが、そこを修正すればいいのではないでしょうか。

[kei344]

出力されたHTML（ブラウザで「ページのソースを表示」）は「wordpress上のコード」と同じ状態でしょうか。

[UUTUM]

>Lhankor_Mhyさま

今まで、新規ページに記入したものがhtmlの全てと考えていました。
しかし、現実は全ページに共通のheaderとかfooterがついたりするわけだから
新規ページに記述したもの以外もhtmlに含まれるということを学びました。
ありがとうございます！

ここでさらに疑問が生まれるのですが、
修正というのは具体的にどの箇所を修正すればよろしいでしょうか？

他のhtml(共通headerや共通footerなど)が今回のアコーディオンがうまく表示されない問題として
考えるべきなのでしょうか？
私はcoading自体初心者なのですが、あまり今回の問題はhtmlと関係がないように感じます。
htmlの修正というよりはcssの修正が必要ということなのでしょうか？

[Lhankor_Mhy]

いえ、そういう話では全然なくて。

初めにご提示いただいた、codepenのコードである

<a class="toggle" href="#">
<p class="accordion_icon"><span></span><span></span></p>
<h5>タイトル（クリックで開閉します）</h5>
</a>

↑と、そのあとにご提示いただいた、実際のページである

<a class="toggle" href="#"></p>
<p class="accordion_icon"><span></span><span></span></p>
<h5>タイトル（クリックで開閉します）</h5>
<p> </a></p>

↑は、違いますよね？という話です。

「コピペしたのでそのままになっています」とUUTUMさんがおっしゃっていたのですが、実際には異なっている、つまりエディタにコードをコピペしてもそのままのHTMLにならない、ということですから、「おそらく、wordpressのエディタの影響だと思います」と申し上げています。

[UUTUM]

>kei334さま

>出力されたHTML（ブラウザで「ページのソースを表示」）は「wordpress上のコード」と同じ状態でし>ょうか。

あまり意味が理解できておらず、申し訳ないですが、
------------------------
■ブラウザから[⌘]+[SHIFT]+[U]で表示したhtmlをcodepenに記述したもの
https://codepen.io/UUTUM/pen/GRJRbpR
------------------------
上の概要欄にこちらの要素を追加しました。
こちら以外で必要な情報があればご連絡くださいませ
お手数ですが引き続きよろしくお願い致します。

[UUTUM]

>Lhankor_Mhyさま

以下の記述されたコードを見直すと、全く同じもののように見えますが、
違うということでしょうか？

<a class="toggle" href="#">
<p class="accordion_icon"><span></span><span></span></p>
<h5>タイトル（クリックで開閉します）</h5>
</a>

↑と、そのあとにご提示いただいた、実際のページである

<a class="toggle" href="#"></p>
<p class="accordion_icon"><span></span><span></span></p>
<h5>タイトル（クリックで開閉します）</h5>
<p> </a></p>

↑は、違いますよね？という話です。

wordpressの影響というお話、別の回答者さまからもいただいておりまして、
【wpautop=wordpress自動整形機能】
もしこちらを解除する方法などご存知であればご教示頂ければと思います。

また、何日にも渡り色々とご助言いただきありがとうございます。
何卒よろしくお願い致します。

[Lhankor_Mhy]

違う箇所は、4行目です。
また、抜き出した部分以外にも、異なる部分があります。

[Lhankor_Mhy]

wpautopについては、KazuhiroHatanoさんのご回答で示されているリンクの通りに試してみては？

> フィルターを無効にする

> 一部のテーマは wpautop フィルターを無効にするため functions.php に次のようなコードを含めています：

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

>また、投稿毎にフィルターの有効／無効を変えられる プラグイン もあります。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wpautop

[UUTUM]

Lhankor_Mhyさま

>違う箇所は、4行目です。
4行目確認致しました！ありがとうございます

また、wpautopを試してみました。
function.phpに最初タグを入れましたがなぜかうまく反応せず
プラグインを入れて設定しなおしたら、codepenと同じ挙動になりました！
本当に嬉しいです！本当にご丁寧にありがとうございました！

[UUTUM]

最後まで丁寧に初心者の私に色々とお教えいただいたLhankor_Mhyさまをベストアンサーに
選ばせていただきたいと考えているのですが、Lhankor_Mhyさまは回答してないのでベストアンサーとして選択できません。どうしたら良いでしょうか？回答欄になにかご回答いただけますでしょうか？

[Lhankor_Mhy]

お気持ちはありがたいのですが、KazuhiroHatanoさんのご回答が解決方法になっているので、そちらをBAしていただけると幸いです。

[UUTUM]

承知致しました！

ご丁寧に何日にも渡りお付き合いいただき本当にありがとうございました！
また今後も本サイトを利用して色々とご質問することがあるかと思いますが、
またその際、ご都合が宜しければお力をお貸しいただけましたら幸いです。

今後とも何卒よろしくお願い致します！

[Lhankor_Mhy]

ご解決されて何よりです。私がお力になれそうなことがあれば、回答依頼で呼んでください。

[UUTUM]

ありがとうございます！
今後とも何卒よろしくお願い致します！

Answer 1

要素が外に出ちゃうのはaタグの中にブロック要素を入れてるからでしょうかね

html5ではaタグにブロック要素を入れるのは
構文不正ではなくなったはずではあるのですが
html5で宣言していれば大丈夫なのかというのは確認したことがないです

もしHTMLコードの宣言部分が

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

とかになってるなら

<!doctype html>

に

---

コメ欄のを見るに

remove_filter( 'the_content', 'wpautop' );

ができてない気がします

wpautop

Comments

[UUTUM]

KazuhiroHatanoさま

ご回答ありがとうございます。
しかし、先ほどheader.phpを確認してみた所、
<!doctype html>
と初めからなっておりました…

[KazuhiroHatano]

いや、それ以前にHTMLが構文不正ですね、ul一個閉じてないですね

[UUTUM]

本当ですね
そして申し訳ないですが、以下で修正してみたのですが、
ulの閉じタグの位置以下であっておりますでしょうか？
色々と試してみたのですが、追加した所で変化が起きておらず...
お手数ですが何卒よろしくお願いいたします。
-------------------------------------------------------------------------------
<div class="accordion">
<ul>
<li>
<a class="toggle" href="#">
<p class="accordion_icon"><span></span><span></span></p>
<h5>タイトル（クリックで開閉します）</h5>
</a>

<ul>
<li>
<img width="100" height="100" alt="img">
<p>pテスト</p>
</li>
</ul>
</li>
</ul>(←ここに追加しました)
</div>

[KazuhiroHatano]

あってるんじゃないでしょうか、
多少の構文不正はブラウザが補完してくれるので結果に変化はないかもしれないですね

[UUTUM]

KazuhiroHatanoさま

ご確認いただきありがとうございます！

では、こちらが直接的な原因でないことがわかりました
ありがとうございます

[UUTUM]

KazuhiroHatanoさま

ご連絡ありがとうございます
以下の件の【wpautopができていない】というお話に関してですが、
これは具体的にどのように修正すればこの問題は解決しますでしょうか？
(wpautop=wordpressの自動編集機能)の設定が切れるようにすれば問題は解決するということでしょうか？
その場合はどのようなコードをphpに貼り付けたらいいか教えていただけますと幸いです。
またそのコードを削除した場合のデメリット、全体に影響する問題などもお教えいただけますと幸いです

phpは全く未知の領域でなにをどうすればいいのかわからず・・・

なにからなにまで質問してしまう申し訳ございませんがご教示いただけますと幸いです
何卒よろしくお願い致します。

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

wpautop

[UUTUM]

>KazuhiroHatanoさま

今回wpautopが原因で表示が違うことが判明致しました。
とても悩んでいた問題だったのでとても助かりました！
ありがとうございました！

Answer 2

WordPress標準では、jQuery.noConflict();を実行しているため、ふつうに$で書くとjQueryが動きません。

外側の$(function(){ /* 中身 */ });を、jQuery(function($){ /* 中身 */ });のように書き換えてみたら、どうなりますでしょうか。

Comments

[UUTUM]

maisumakunさま

ご返答ありがとうございます。
wordpressのjsを確認した所、$(function(){ /* 中身 */ });となっておりました。
しかし、他のJqueryも同様の記述をしておりますがなぜか機能しているようです。

また、ご教示いただいたjQuery(function($){ /* 中身 */ });に変更しても、変化が見られませんでした。
念の為、変更したコードも以下に記載しますのでご確認いただけましたら幸いです。
お手数をおかけいたしますが引き続き何卒よろしくお願い致します。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<!--Newトグル編集版-->
<script type="text/javascript">
jQuery(function($){
$(".accordion li a").on("click", function() {
$(this).next().slideToggle();
if ($(this).children(".accordion_icon").hasClass('active'))
{
$(this).children(".accordion_icon").removeClass('active');
}
else
{
$(this).children(".accordion_icon").addClass('active'); }
});
});
</script>