wordpressの固定ページや投稿ページでアコーディオンが効かない

前提・実現したいこと

wordpressでサイトのリニューアルを行おうとしています。
そのため、ローカル環境でhtmlを作成し固定ページや投稿ページに貼ったのですが、
一部htmlやindex.phpでは正常に動作するアコーディオンが開きません。
各1つずつという感じで認識せず固まりで認識されてしまいます。

発生している問題・エラーメッセージ

htmlやindex.phpでは問題なく1つ1つアコーディオンが開く

投稿・固定では動作しなくなる

ＨＴＭＬ

<div class="sample-accordion">
<div class="ac-content">
<label for="ac-cap1"><h3 id="q1">＋　1、○○○○○○○○○○○○○○？</h3></label>
<input id="ac-cap1" type="checkbox">
<div class="ac-cont">
<p class="setumei">○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p>
</div>
<label for="ac-cap2"><h3 id="q2">＋　2、××××××××××××××××××××？</h3></label>
<input id="ac-cap2" type="checkbox">
<div class="ac-cont">
<p class="setumei">××××××××××××××××××××××××××××××××××××××××××××××××</p>
</div>
<label for="ac-cap3"><h3 id="q3">＋　3、△△△△△△△△△△△△？</h3></label>
<input id="ac-cap3" type="checkbox">
<div class="ac-cont">
<p class="setumei">△△△△△△△△△△△△△△△△△△△△△△△△△△</p>
</div>

ＣＳＳ

.sample-accordion {
  min-width: 300px;
  margin: 0 auto;
  padding: 0;
}
.sample-accordion .ac-content {
  margin: 0;
  padding: 0;
}
.sample-accordion input {
  display: none;
}
.sample-accordion label {
  display: block;
  cursor: pointer;
  padding: 10px;
  color: #333;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
}
.sample-accordion label:hover {
  background: #ccc;
}
.sample-accordion .ac-cont {
  transition: 0.2s;
  height: 0;
  overflow: hidden;
  background: #ddd;
  padding: 0 10px;
  box-sizing: border-box;
}
.sample-accordion input:checked + .ac-cont {
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}

.sample-accordion h3 {
	font-size:2.6em;
	line-height:18pt;
	margin:0.5em 0;
	font-weight:bold;
	letter-spacing: 0.1em;
}

.sample-accordion p.setumei {
	font-size:1.6em;
	line-height:18pt;
	margin:0.5em 0;
	letter-spacing: 0.1em;
}

kei344

2018/12/25 02:30

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kawabatasan

2018/12/25 02:41

すみません。今、教えて頂いた通りに行いました。知らずにあのような書き方をしてしまい申し訳ありません。

行動規範の内容に同意します

回答1件

ベストアンサー

投稿の本文エリアに貼り付けているのであれば、途中の改行を全部削除してみてください。

追記：

inputが消されるからですね。

【$allowedposttags – WordPress私的マニュアル】
https://elearn.jp/wpman/variable/allowedposttags.html

注意

WordPress 3.3.1標準の状態では、次のHTMLタグが登録されている。
a, abbr, acronym, article, aside, b, big, blockquote, br, button, caption, cite, code, col, del, dd, details, div, dl, dt, em, fieldset, figure, figcaption, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, label, legend, li, menu, nav, p, pre, q, s, span, section, strike, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, ol, var

フックを使って必要な要素・属性を許可する必要があります。

【【ワードプレス】投稿できるHTMLタグ（iframeなど）を追加する方法 | あずみ.net】
https://a-zumi.net/allowed-html-add-iframe/

【記事投稿時に任意のHTML属性を追加する方法 | Webエンジニアブログ】
http://dim5.net/wordpress/new-html-attribute.html

投稿2018/12/25 02:42

編集2018/12/25 02:58

kei344

総合スコア69407