WordPress에서 암호로 보호 된 양식을 사용자 정의하고 스타일링합니다

최근 고객은 WordPress 페이지에 비밀번호 보호를 추가해야하며, 이는 그 자체로는 복잡하지 않습니다. 그러나 그들은 나중에 텍스트를 수정하고 페이지의 모양을 개선하도록 요청했습니다. 나는이 도전을 쉽게 받아 들였고 여기에 나의 구현이있다.

WordPress에서 암호로 보호 된 페이지를 사용자 정의하는 방법 1 단계 : functions.php 파일을 편집합니다 파일을 열고 다음 코드 블록을 추가하십시오.

빨리 설명하겠습니다. 암호 보호 코드는

폴더의 파일에서 생성되며 직접 편집 할 수 있습니다. 그러나 핵심 코드를 수정하는 것은 나쁜 생각이기 때문에 이것은 권장되지 않습니다. 왜? WordPress를 업데이트하면 모든 변경 사항이 지워집니다. 따라서 잠재적 인 문제를 예방하기 위해이 접근법을 피하는 것이 가장 좋습니다. 위의 코드를 파일에 넣으면 WordPress 후크 시스템을 사용하여 수정할 수 있으므로 WordPress를 업데이트 할 때 양식의 변경 사항을 잃을 염려가 없습니다.

보시다시피, 실제로 CSS 클래스를 양식 자체, 양식 태그, 비밀번호 필드 및 버튼에 추가했습니다. 필요한 모든 요소가 설치되면 이제 CSS를 사용하여 완전히 스타일링 할 수 있습니다. 가장 좋은 점은 폴더를 변경하지 않으므로 표준 WordPress 코딩 규칙을 위반하지 않는다는 것입니다. 2 단계 : 기본 비밀번호 보호 된 텍스트를 변경하십시오 위의 자본화 된 텍스트는 내가 변경 한 내용, 첫 번째 텍스트 세트를 보여줍니다.

보시다시피, 이것은 다음과 같은 소개 텍스트입니다.

이제 원하는 텍스트로 변경할 수 있습니다. 아무 것도 보여주지 않고도 인용문 사이의 모든 것을 제거 할 수도 있습니다. functions.php 3 단계 : 비밀번호 입력 필드 레이블 변경

입력 필드의 왼쪽에 표시된 기본 레이블은

<?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;
}
?>

비밀번호 입니다. 원하는대로 변경할 수 있습니다. 제 경우에는 CSS 클래스를 할당하고 다음 CSS 규칙을 사용하여 태그를 제거했습니다.

wp-includes 다른 속성을 변경하려면 동일한 CSS 클래스를 사용할 수도 있습니다. 4 단계 : 비밀번호 입력 필드 스타일을 설정 functions.php 나는이 양식의 기본 모양이 마음에 들지 않지만이 비밀번호 입력 필드를 추가하여 더 현대적으로 보일 수 있습니다. 선호도에 따라 추가로 사용자 정의 할 수 있습니다.

5 단계 : 제출 버튼 스타일을 설정

wp-includes 함수 코드에서 CSS 클래스를 제출 버튼에 추가했습니다. 클라이언트 웹 사이트의 모든 버튼이 동일하게 보이기를 원하기 때문에 수행됩니다. 웹 사이트의 일관성이 핵심입니다. 이것은 내가 사용하는 CSS입니다

6 단계 :

형식으로 추가 텍스트를 추가하십시오 나는 또한 비밀번호 필드가 사례에 민감하다는 것을 사용자에게 알려주는 설명을 추가하고 싶습니다. 이를 위해 방금 양식 아래에 단락 코드를 추가하고 스타일 태그를 삽입하여 텍스트에 사용자 정의 스타일을 적용하여 나머지 페이지와 구별했습니다.

추가 옵션

이전 섹션에서는 개발자의 관점에서 비밀번호 보호 페이지를 사용자 정의하는 방법에 대해 논의했습니다. 그러나 코드를 편집하는 데 익숙하지 않은 경우 다른 도구를 사용하여 동일한 결과를 얻을 수도 있습니다.

다음은 WordPress에서 암호로 보호 된 양식을 사용자 정의 할 수있는 일부 플러그인 또는 추가 기능입니다.

옐로우 펜슬

allownpencil 플러그인은 코드를 쓰지 않고 웹 사이트 모양을 사용자 정의 할 수있는 기능이 풍부한 Visual CSS 편집기를 제공하는 WordPress 플러그인입니다. 사용자 친화적 인 인터페이스와 광범위한 사용자 정의 옵션을 제공합니다.

siteorigin css SiteOrigin CSS 플러그인은 무료 WordPress 플러그인으로 간단한 비주얼 편집기로 웹 사이트 모양을 쉽게 사용자 정의 할 수 있습니다. 코드를 쓰지 않고 웹 사이트의 CSS (Cascading Stylesheet)를 변경할 수있는 사용자 친화적 인 인터페이스를 제공합니다.

이 플러그인을 사용하면 코드를 직접 수정하지 않고 사용자 정의 암호로 보호 된 페이지의 스타일과 텍스트를 쉽게 구현할 수 있습니다.

위 내용은 WordPress에서 암호로 보호 된 양식을 사용자 정의하고 스타일링합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!