質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

[wordpress]<a>タグ内にすべてのタグを入れられるようにするには?

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,056

soonyan0718

score 13

 前提・実現したいこと

<a>タグで<div>タグを囲んでも、wordpressの自動修正機能で修正されないようにしたい。

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

wordpressのフロントページにおいて<a>タグで<div>タグを囲って、ページを更新すると、
一度は反映されますが、
次の更新時には、wordpressの自動修正機能のためか、<a>タグが<p>タグで囲まれてしまい、リンクが外れてしまいます。
その都度修正し直さなくてはいかず、時間がかかってしまうし、htmlの知識がないユーザに編集を任せられない状況となっています。

 該当のソースコード

【記述したコード】

<div class="small-box">
<a href="http://XXXXXX">
<div class="title">タイトル</div>
<div class="photo"><img src="http://XXXXX" alt="" /></div>
</a>
</div>

↓↓↓↓↓
【wordpressによって書き換えられた後】

<div class="small-box">
<p><a href="http://XXXXXX"></a></p>
<div class="title">タイトル</div>
<div class="photo"><img src="http://XXXXX" alt="" /></div>
<p></p>
</div>

 試したこと

インターネットで検索した結果、
「ビジュアルエディタの自動整形機能を無効化する方法」
(https://dainashiyesterday.com/post-4874/)
というサイトを参考に、以下のコードをfunction.phpに追記しましたが、
ほかの個別ページでは上手くいきましたが、
フロントページに設定したTOPページではなぜか反映されず、
状況が改善されません。

フロントページでも反映させるには、どのような記述をfunction.phpに追記すればよいかを
PHPやwordpressに詳しい方がいらっしゃいましたら、
ぜひご教授いただけますでしょうか?

▼▼▼▼▼▼以下function.phpに記述している全コードです▼▼▼▼▼▼

<?php
if ( !defined( 'ABSPATH' ) ) {
exit;
}
//親スタイルシート読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

/* ビジュアルエディタがタグを勝手に削除するのを阻止
---------------------------------------------------------- */
function custom_tiny_mce_before_init( $init_array ) {
  global $allowedposttags;

  $init_array['valid_elements'] = '*[*]'; //すべてのタグを許可(削除されないように)
  $init_array['extended_valid_elements'] = '*[*]'; //すべてのタグを許可(削除されないように)
  $init_array['valid_children'] = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']'; //aタグ内にすべてのタグを入れられるように
  $init_array['indent'] = true; //インデントを有効に
  $init_array['wpautop'] = false; //テキストやインライン要素を自動的にpタグで囲む機能を無効に

  return $init_array;
}
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_before_init' );

 補足情報(FW/ツールのバージョンなど)

wordpressのバージョンは最新の 4.9.8–ja です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/11/28 14:35

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

    キャンセル

  • kei344

    2018/11/28 14:36

    あと、質問タグに「WordPress」を追加されることをお勧めします。

    キャンセル

  • soonyan0718

    2018/11/28 14:43

    ご指摘ありがとうございます!大変失礼しました。早速修正を行いました。

    キャンセル

回答 2

checkベストアンサー

+2

aにdivが包含しない前提で、閉じ忘れとみなして閉じてくれているのでしょうね
もしどうしても難しそうであればaをやめてdivをカスタムデータにするとかでしょうかね

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('[data-href]'),function(x){
    x.addEventListener('click',function(e){
      location.href=x.dataset["href"];
    });
  });
});
</script>
<div class="small-box">
<div data-href="http://XXXXXX1">
<div class="title">タイトル1</div>
<div class="photo"><img src="http://XXXXX" alt="img1" /></div>
</div>
<div data-href="http://XXXXXX2">
<div class="title">タイトル2</div>
<div class="photo"><img src="http://XXXXX" alt="img2" /></div>
</div>
</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/28 23:56

    「divをカスタムデータにする」という方法を、初めて知りました!
    さっそく、page.phpに教えていただいた<script>コードを埋め込み、htmlコードを書き換えたところ、上手くいきました!何度更新してもリンクされたままです。
    マウスのカーソルが指マークに変更しない点については、CSSで{cursor: pointer;}の設定で対処することができました。
    このような素晴らしい方法を教えていただき、感謝いたします。大変勉強になりました。

    キャンセル

+2

自動で入るp要素を抑止するのは試しましたか?

【WordPressでエディタに自動生成されるタグ(<p>とか<br>)を制御する方法まとめ - ウェブ企画ラボ】
https://webkikaku.co.jp/blog/wordpress/wordpress-automatic-forming-control/

functions.php

remove_filter('the_content', 'wpautop'); // 記事の自動整形を無効にする
remove_filter('the_excerpt', 'wpautop'); // 抜粋の自動整形を無効にする

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/28 23:50

    お早いご回答ありがとうございます!
    「自動で入るp要素を抑止する」をまだ試していませんでしたので、さっそく上の二つのコードをfunction.phpの一番下に追記し、ctrl+F5で強制更新をかけて試しました、今回のケースには効果がありませんでした...

    page.phpにに追記する方法のご紹介もありましたので、こちらでも試してみたいと思います!

    キャンセル

  • 2018/11/28 23:58

    入れた後で新規記事作成しないと既にデータとして保存されている場合は変更されない可能性があります。

    キャンセル

  • 2018/11/29 00:56

    kei344さん、追加のアドバイスありがとうございます!
    新規の個別ページを作成してみましたが、やはり反映されないようです。page.phpに
    <?php remove_filter ('the_content', 'wpautop'); ?>
    を追記してもうまく行きませんでした。どうしても<a>タグが<p>に囲われてしまいます。
    私のやり方がどこかおかしいのかもしれません。

    今回は急を要するため、yambejpさんに教えていただいたカスタムデータのほうを採用させていただきました。しかし、可能であれば、<a>タグをやっぱり使用したいので、教えていただいたページを参考にして、考え得るパターンを色々試して、「自動で入るp要素を抑止する」を方法を引き続き模索していきたいと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる