web-dev-qa-db-ja.com

<！ - more - >ボタンを作成する方法

CodexでRead More関数に異なるテキストを表示させる方法に関する情報はたくさんありますが、<button class="readmorebtn" onclick(permalink)>Read More</button>を表示させるにはどのような種類のフィルタを使用する必要がありますか。

filtersread-more
1
torinagrippa

「（もっと...）」リンクは、 get_the_content() の（the_content_more_link）でフィルタリングされます。この関数にフックして、必要なものを返すことができます。

add_filter('the_content_more_link', 'more_button');
function more_button($more_link) {
    return '<button class="readmorebtn" onclick="' .
        esc_attr('window.location="' . get_permalink() . '"') .
        '">Read more</button>';
}
4
Jan Fabry

簡単な答え：あなたは違います。

長くて便利な答え：あなたがする必要があるのはthe_content_more_linkフィルタにフックして単純なリンクを次のようなスタイルに対応できる要素に変更することですボタンのように見えます。私が私のサイトで使用しているテーマは既にこれをしています。それは私のもっと読むリンクをに変える：

<div class="readon-wrap1">
    <div class="readon1-l png"></div>
    <a href="http://mindsharestrategy.com/why-i-run/" class="readon-main">
        <span class="readon1-m png">
            <span class="readon1-r png">More</span>
        </span>
    </a>
</div>

あなたは定期的にもっとリンクが埋まっているのを見ることができます。その周りのさまざまな<div>sと<span>sは、リンクが灰色の単色ボタンとして表示されるようにリンクをスタイルするのに役立ちます。

Read More button

あなたがボタンのように見えるようにあなたのリンクをスタイルしたいのであれば、これは取るべき道です。コメントに記載されている@ sorich87のように、<button>タグはフォーム内での使用を意図しています。もっと読むリンクに<button>タグを使うと、次のような問題に直面するでしょう。

  1. あなたのサイトは検証されません
  2. あなたのサイトのレイアウトはスクリーンリーダーと特定の解析エンジンを混乱させる可能性があります（彼らが<button>を見て、リンクを取り除いたり、フォームの残りを探している間にエラーを投げたりするでしょう）。
  3. 誤ってフォームの本体内に<!--more-->タグをネストした場合は、衝突が発生する可能性があります。あなたは今 "私はしません"と言うことができますが、事故は事故であり、それはまだ起こるかもしれません...そして奇妙さと混乱が続くでしょう。
5
EAMann