WordPressでパスワードで保護されたフォームのカスタマイズとスタイリング

最近の顧客は、WordPressページにパスワード保護を追加する必要がありますが、それ自体が複雑ではありません。しかし、彼らは後にテキストを変更し、ページの外観を改善するように求めました。私はこの課題をすぐに受け入れましたが、これが私の実装です。

WordPressでパスワードで保護されたページをカスタマイズする方法

ステップ1：functions.phpファイルを編集します

ファイルを開き、次のコードブロックを追加します。 functions.php

すぐに説明させてください。パスワード保護コードは、

<code class="language-php"><?php
add_filter( 'the_password_form', 'custom_password_form' );

function custom_password_form() {
    global $post;
    $label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );

    $o = '
' . __( "这是您新的密码提示文本，显示在密码表单上方" ) . '
<label for="' . $label . '">' . __( "密码：" ) . ' </label>
<input class="input password-input" id="' . $label . '" name="pwd" type="password" size="20">
<input type="submit" name="Submit" class="button" value="' . esc_attr__( " .>
<p class="extra-text">额外文本可以放在这里……这将显示在表单下方</p>

';

    return $o;
}
?></code>

フォルダー内のファイルから生成され、直接編集することができます。ただし、コアコードを変更することは悪い考えであるため、これは推奨されません。なぜ？ WordPressを更新すると、すべての変更がクリアされます。したがって、潜在的な問題を防ぐために、このアプローチを回避することが最善です。上記のコードを

ファイルに配置すると、WordPressフックシステムを使用して変更でき、WordPressの更新時にフォームの変更を失うことを心配する必要はありません。 wp-includes ご覧のとおり、フォーム自体、フォームタグ、パスワードフィールド、ボタンにCSSクラスを実際に追加しました。必要な要素がすべて整ったら、CSSを使用して完全にスタイルを整えることができます。最良の部分は、フォルダーに変更を加えないため、標準のWordPressコーディングルールに違反しないことです。 functions.php

ステップ2：デフォルトのパスワードで保護されたテキストを変更しますwp-includes

上記の大文字のテキストには、私が変更したもの、最初のテキストセットも示しています：

ご覧のとおり、これはあなたの紹介テキストです。

今、私たちはあなたが望むどんなテキストにもそれを変更できます。何も見せずに引用符間のすべてを削除することもできます。

<code>这是您新的密码提示文本，显示在密码表单上方</code>

ステップ3：パスワード入力フィールドラベルの変更

<code>此内容受密码保护。要查看它，请在下方输入您的密码：</code>

入力フィールドの左側に表示されるデフォルトのラベルは、

パスワードです。あなたはそれをあなたが望むものに変更することができます。私の場合、CSSクラスを割り当て、次のCSSルールを使用してタグを削除しました。

他のプロパティを変更する場合は、同じCSSクラスを使用することもできます。

ステップ4：パスワード入力フィールドスタイルを設定します

<code class="language-css">.pass-label { display: none; }</code>

このフォームのデフォルトの外観は気に入らないが、このパスワード入力フィールドが追加されているため、よりモダンに見えるようにすることができます。好みに応じてさらにカスタマイズできます。

ステップ5：提出ボタンスタイルを設定します

関数コードでは、

CSSクラスを送信ボタンに追加しました。これは、クライアントWebサイトのすべてのボタンを同じように見せたいので行われます。ウェブサイトの一貫性が重要です。これは私が使用するCSSです：

ステップ6：フォームの下に追加のテキストを追加button

また、パスワードフィールドがケースに敏感であることをユーザーに伝える説明を追加する必要があります。これを行うために、フォームの下に段落コードを追加し、スタイルタグを挿入してテキストにカスタムスタイルを適用して、ページの残りの部分と区別しました。

追加オプション

前のセクションでは、開発者の観点からパスワード保護ページをカスタマイズする方法について説明しました。ただし、コードの編集に慣れていない場合は、他のツールを使用して同じ結果を達成することもできます。

以下は、WordPressでパスワードで保護されたフォームをカスタマイズできるいくつかのプラグインまたはアドオンです。

yellowpencil

YellowPencilプラグインは、コードを作成せずにWebサイトの外観をカスタマイズできる機能が豊富なVisual CSSエディタを提供するWordPressプラグインです。ユーザーフレンドリーなインターフェイスと広範なカスタマイズオプションを提供します。

siteorigin css

Siteorigin CSSプラグインは、シンプルなビジュアルエディターでWebサイトの外観を簡単にカスタマイズできる無料のWordPressプラグインです。コードを書くことなく、ウェブサイトのCSS（カスケードスタイルシート）を変更できるユーザーフレンドリーなインターフェイスを提供します。

これらのプラグインを使用すると、コードを直接変更することなく、カスタムパスワードで保護されたページのスタイルとテキストを簡単に実装できます。

以上がWordPressでパスワードで保護されたフォームのカスタマイズとスタイリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。