Biểu trưng đăng nhập WordPress tùy chỉnh

Bạn không có những người yêu thích trong số các con của bạn, nhưng bạn có đồng minh. –Zadie Smith
Bạn là một nhà thiết kế nên cuối cùng, bạn là một nghệ sĩ biểu diễn sẽ không làm người quan sát thán phục với những kỳ công ấn tượng của legerdemain; bạn luôn có một tấm thẻ trên tay áo của bạn.

Lưu ý: đây là phần giới thiệu hơi lan man. Bạn có thể an toàn bỏ qua phần “Xác định chức năng”.

Tuy nhiên, tấm thẻ lên tay áo của bạn chỉ là một trò lừa bịp. Những người dòm ngó Dribbble trung thành của bạn (và mẹ của bạn) nghĩ rằng điều đó thật tuyệt nhưng nếu không thì chỉ những khách hàng siêu địa phương của bạn mới nghĩ rằng nó giải quyết được vấn đề của họ. Câu chuyện ngắn: thẻ của bạn hơi giống nhau, xin lỗi phải nói. Nó không giữ cho bạn Ron Burgundy “San Diego” sang trọng.

May mắn thay, WordPress có. Ngay cả trước khi khách hàng của bạn biết họ muốn gì, bạn đã biết có một chức năng WordPress dành cho điều đó! Trong số tất cả những đứa trẻ thiết kế lém lỉnh và có quyền của bạn, WP là người ít được quyền nhất. Bạn hầu như có thể cho nó biết phải làm gì và nó sẽ (phần lớn) làm điều đó.

Thêm vào đó, khi cuối cùng bạn cũng có được một hợp đồng biểu diễn bao gồm mọi thứ, từ xây dựng thương hiệu đến tương tác, đôi khi điều đó sẽ giúp bạn tránh được những trò tai quái. Bạn sẽ thiết kế một logo mà cuối cùng sẽ được hoạt hình hóa (hy vọng là bởi một số schmoe siêu tài năng khác) nhưng ở giữa tất cả, sẽ có một trang web. A ha! Trang mạng! Trang web đó, bạn quyết định ngay lập tức, sẽ chạy trên WordPress. Thực tế, trực quan, khách hàng sẽ hiểu nó nhanh chóng, vân vân.

Một khi bạn bắt đầu giải quyết vấn đề xây dựng thương hiệu — rất lâu trước khi bạn chắc chắn đạt được “Cogito ergo sum” của Descartes — bạn cởi mở bắt đầu công việc tìm kiếm danh tính khách hàng của mình một cách cởi mở.

Rõ ràng bạn đã tốt nghiệp đại học với tấm bằng cho phép người khác trả tiền cho bạn để nói cho họ biết họ là ai! Họ thực sự bỏ ra các mức độ cho điều này! Phi lý của nó.

Đương nhiên, bởi vì bạn sẵn sàng nhận khoản tiền gửi đa không 50% béo ngậy đó với nụ cười toe toét tự hào hứa hẹn không có kết quả huy hoàng, bạn phải đến một số loại chiến dịch, hình ảnh, triển lãm, v.v. mô tả cho khách hàng của bạn họ là ai, một cách hiệu quả. Bạn, chỉ mới gặp họ gần đây (và ý tôi là đã gặp qua email, Skype và twitter nhưng chưa bao giờ gặp gỡ về mặt thể chất, gặp gỡ về mặt tinh thần) sẽ chuyển tải một cách thuyết phục mục đích tồn tại của họ.

Chúc bạn may mắn! Tôi thực sự không thể giúp bạn ở đó. Trên thực tế, đối với thương hiệu, bạn là của riêng bạn. Tuy nhiên, thông thường, nếu bạn đang giải quyết một vấn đề toàn diện, thì ít nhất bạn sẽ phải cung cấp một logo. Logo đó sẽ được tô điểm trên tài liệu thế chấp in passé và chắc chắn sẽ được sử dụng trong các phương tiện web.

Nếu bạn đủ may mắn để có được tất cả trong một, bạn sẽ muốn kết hợp tất cả mọi thứ và tạo ra một hình ảnh thương hiệu gắn kết. Khi WordPress xuất hiện trong bức tranh đó, bạn có thể sẽ muốn thay thế thương hiệu WP bằng thương hiệu của khách hàng của mình. Ít nhất, trên trang đăng nhập.

Đương nhiên, có chức năng cho điều đó !!!
WordPress đẹp. Kể từ phiên bản 3.8, các màn hình quản trị được đơn giản hóa, sắp xếp hợp lý và loại bỏ các lông tơ thiết kế không liên quan và được đánh bóng đến mức tối giản gần như hoàn hảo.

Tuy nhiên, trước khi đăng nhập vào khu vực quản trị xinh đẹp này, bạn sẽ đến trang đăng nhập rất quen thuộc. Như đã thảo luận trong Style the Visual Editor, nếu bạn đã dành thời gian để tạo ra chủ đề của mình thật đẹp, đôi khi tất cả những gì một chủ đề cần để đẩy nó từ tốt đến tuyệt vời là thêm chi tiết [ized] tùy chỉnh.

Không phải có gì sai với giao diện người dùng mặc định của WordPress nhưng có lẽ - vì lợi ích của thương hiệu và để giúp hoàn thành ảo giác về sự gắn kết - biểu tượng nào đi kèm với chủ đề của bạn có ý nghĩa hơn biểu tượng W mặc định nằm trên đầu nhật ký- báo.

May mắn thay, việc thay đổi chữ W mang tính biểu tượng mặc định cho logo tùy chỉnh của riêng bạn là một việc khá đơn giản.

Xác định chức năng

Trước khi chúng ta bắt đầu xác định hàm, điều quan trọng là phải hiểu đánh dấu và kiểu. Đây là phần có liên quan của trang đăng nhập WordPress trông như thế nào:
<body class="login login-action-login wp-core-ui">
  <div id="login">
    <h1>
      <a href="http://wordpress.org/" title="Powered by WordPress">noms</a>
    </h1>
    <form name="loginform" id="loginform" action="/wp-login.php" method="post">
      <!-- login form fields here -->
    </form>
    <!--  additional page content -->
  </div>
  <!--  additional page content -->
</body>
WordPress nhắm mục tiêu <a> bên trong <h1> và chèn logo dưới dạng background-image. Nếu bạn xem nguồn khi đang ở trên wp-login trang, bạn sẽ thấy rằng trong wp-admin.css, WordPress đang khai báo các kiểu cho .login h1 a {}

Có hai tùy chọn để xác định và ghi đè kiểu cho điều này:

  1. Bảng định kiểu được nhúng hoặc
  2. Các bảng định kiểu được liên kết.

Biểu định kiểu được nhúng

Với cách tiếp cận này, bạn xác định một hàm xuất ra CSS mong muốn của bạn ngay trong <head> bằng cách sử dụng login_enqueue_scripts hook. Trong , bạn sẽ bao gồm chức năng sau:functions.php
function butter_login_logo() { ?>
  <style type="text/css">
    body.login div#login h1 a {
    background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/butter-login-logo.png);
  }
  </style>
<?php }
add_action( 'login_enqueue_scripts', 'butter_login_logo' );
Hàm trên sử dụng hook để xuất kiểu nhúng của chúng ta trong phần <head> của trang đăng nhập. Lưu ý rằng mặc dù CSS do cốt lõi định nghĩa để xuất ra biểu trưng đơn giản là chúng tôi đang cụ thể hơn rất nhiều với tuyên bố của mình: butter_login_logo()login_enqueue_scripts.login h1 a {}body.login div#login h1 a {}

Điều này là do, trong CSS, các khai báo của bạn càng cụ thể thì chúng càng được ưu tiên hơn. Ngoài ra, các biểu định kiểu được nhúng (các kiểu xuất hiện trong <head>) được ưu tiên hơn các biểu định kiểu được liên kết.

Với chức năng trên, tất cả những gì bạn phải làm là đảm bảo rằng bạn có một tệp hình ảnh (biểu trưng tùy chỉnh của bạn) có tên login-logo.png được đặt bên trong hình ảnh / thư mục của chủ đề của bạn.

Biểu định kiểu được liên kết

Về cơ bản, bạn có thể tạo kiểu và tùy chỉnh mọi thành phần trên màn hình đăng nhập: biểu trưng, ​​các trường biểu mẫu và biểu mẫu, nền, v.v. Đối với thực tế đó, điều đó có thể có ý nghĩa — ngay cả khi mối quan tâm duy nhất của chúng tôi hiện tại là biểu trưng — đặt các kiểu trong một tệp CSS riêng biệt thay vì xuất chúng trực tiếp trong. Bằng cách này khi quá trình xây dựng tiếp tục và nếu cần, bạn có thể dễ dàng cập nhật kiểu của mình.

Chúng tôi vẫn sẽ sử dụng login_enqueue_scripts hook nhưng thay vì xuất ra bảng định kiểu được nhúng, chúng tôi sẽ sử dụng biểu định kiểu được liên kết.

Bắt đầu bằng cách tạo một tệp CSS mới, đặt tên là ví dụ custom-login-styles.css (hoặc bất kỳ thứ gì bạn thích, chỉ cần đảm bảo điều chỉnh chức năng cho phù hợp) và lưu nó vào thư mục css / bên trong thư mục chủ đề của bạn.

Như trước khi chúng ta định nghĩa hàm như sau:

function butter_login_styles() { ?>
  <link rel="stylesheet" id="custom_login_styles"  href="<?php echo get_stylesheet_directory_uri() . 'css/butter-login-styles.css'; ?>" type="text/css" media="all" />
  <?php }
add_action( 'login_enqueue_scripts', 'butter_login_styles' );

Với điều đó, khi ở trên màn hình đăng nhập, WordPress giờ sẽ liên kết đến butter-login-styles.css mới của bạn và những khai báo CSS nào hiện có sẽ được áp dụng.

Trong phần mới được tạo butter-login-styles.css, hãy nhắm mục tiêu và đặt logo của bạn làm nền. ví dụbody.login div#login h1 a {}

body.login div#login h1 a {
  background-image: url(../images/login-logo.png);
}

WordPress Codex cung cấp các bộ chọn CSS rất cụ thể sau đây mà bạn có thể sử dụng trong biểu định kiểu bạn vừa tạo để tùy chỉnh giao diện của trang đăng nhập.

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}