";var nuttaibut = "<\/i> T\u1ea3i th\u00eam<\/span>"; Thay đổi giao diện admin WordPress » Rồng Con HG Trang chủGiới thiệuBlogPhần mềmThủ thuậtTiện íchRút gọn liên kếtVòng quay may mắnLiên hệ HomePhần mềmThay đổi giao diện admin của WordPress Nguyễn Văn Luyến 6 năm trướcThay đổi giao diện admin của WordPress Mục lụcThấy nhiều Guest blogger mới của Thạch viết bài chất qua, hôm nay tranh thủ viết cùng anh em cho nó máu. Qua quá trình sử dụng, mò mẫm wordpress cũng khá lâu rồi, mình thấy mọi thứ oki nhưng khi thiết kế website cho khách hàng thì người ta lại chê sao đường dẫn vào admin khó nhớ, giao diện đăng nhập thì không đẹp và đơn giản quá.Ngâm cứu một số trang trên mạng thì mình cũng tìm ra được cách thay đổi giao diện admin của wordpress nhanh và đơn giản, nên viết bài nay chia sẻ với mọi người. Cũng nhân dịp khai trương blog Quốc Marketing mới, nên viết bài trên Thạch kiếm traffic khai trương vậy. Anh em nếu thấy bài viết hay thì ủng hộ vài cú click chuột vào blog cá nhân của mình. Coi bộ hơi lộ liễu quá nhỉ hjhjThôi, nói nhiều quá, bắt tay code thôi nào !1. THAY ĐỔI ĐƯỜNG DẪN ĐĂNG NHẬP ADMINMình nghĩ chỉnh sửa cái này không phải mới nhưng ít blogger nói về điều này, nên mình xin trình bày luôn ở đây. Thông thường để đăng nhập admin trong wordpress, chúng ta thường vào //websitecuaban.com/wp-loginđúng không? Nhưng nếu bạn thiết kế website công ty khách hàng thì người ta lại nói sao khó nhớ quá. Chỉ cần một đoạn code cực kỳ đơn giản như sau, bạn có thể thay đổi đường dẫn đăng nhập admin tùy ý theo sở thích.Bạn mở file.htaccessthêm vào trên cùng như sauRewriteRule ^quocpro$ //quocmarketing.com/wp-login.php [NC,L] Trong đó, bạn thay quocpro tùy thích , và thay thế đường link website của mình vàoQuá đơn giản phải không? Làm ngay và luôn đi các bạn2. THAY ĐỔI ĐƯỜNG DẪN LOGO ADMINKhi vào trang đăng nhập admin, nếu vô tình click vào logo wordpress thì nó sẽ nhảy ngay vào //wordpress.org . Nếu bạn nhận dự án thiết kế website cho khách hàng thì điều này là hoàn toàn không nên. Chúng ta có thể thay đổi điều này cũng rất dễ dàng thôi. Bạn mở file function.php, nếu bạn đang sử dụng Thesis 2 giống Thạch thì thêm vào custom_functions.php , chèn thêm đoạn code này nhé<br /> // Thay doi duong dan logo admin<br /> function wpc_url_login(){<br /> return "//quocmarketing.com/"; // duong dan vao website cua ban<br /> }<br /> add_filter('login_headerurl', 'wpc_url_login');</p> <p>Save lại và F5 xem nào !3. THAY ĐỔI LOGO, HÌNH NỀN ĐĂNG NHẬP ADMIN WORDPRESSTương tự bạn chèn đoạn code này vàofunction.php để thay thế logo trong trang đăng nhập wordpress. Bạn có thể hiểu đoạn code này thêm vào 1 file css cho trang đăng nhập admin. Bạn tạo một file css mới với tên tùy thích (ở đây mình đặt là login.css), ngang hàng với style.css trong theme của bạn. Không nên chèn trực tiếp vào style.css vì sẽ load chậm hơn. Nhớ sửa đường dẫn file css của bạn lại nhé<br /> // Thay doi logo admin wordpress<br /> function login_css() {<br /> wp_enqueue_style( 'login_css', get_template_directory_uri() . '/login.css' ); // duong dan den file css moi<br /> }<br /> add_action('login_head', 'login_css');</p> <p>Tiếp theo bạn copy và paste đoạn code css sau vào file login.css vừa tạo khi nãy, nhớ thay đổi đường dẫn đến logo của bạn. Lưu ý chiều ngang mặc định là 312px và cao là 67px các bạn nha. Nếu logo của bạn không trùng với kích thước này thì bạn phải điều chỉnh thêm padding, margin trong css để cho vị trí logo đặt vào sao cho đẹp nhất.<br /> #login h1 a {<br /> background: url("<a href="//quocmarketing.com/wp-content/themes/henry/images/logo.png">images/logo.png</a>") no-repeat !important;<br /> }</p> <p>Nếu bạn muốn thay đổi màu nền hay hình nền trang đăng nhập thì có thể thêm đoạn css bên dưới vào login.css, ví dụ trên trang Blog cá nhân của mình như saubody.login {background:#008800}Tương tự, khi bạn thay đổi màu nền và hình nền thì có lẽ màu của các text không còn phù hợp nữa, bạn thêm code css sau để sửa lại các text bên dưới trang đăng nhập, các bạn có thể tùy biến lại màu sắc sao cho đẹp nhất nhé. Code của mình như sau:<br /> .login #nav a, .login #backtoblog a {color:#fff!important;text-shadow:none;text-decoration:none}<br /> .login #nav a:hover, .login #backtoblog a:hover {color:#ccc!important;</p> <p>Chỉ cần lên Google search từ khóa background thì các bạn đã có sẵn một thư viện đồ sộ rồi, có thể thay đổi tùy ý nhé.3. SỬ DỤNG PLUGINTheo mình thì với sự điều chỉnh code như trên khá nhanh và đơn giản nên không nhất thiết phải xài thêm plugin để làm gì. Tuy nhiên, mình cũng xin cung cấp thêm cho các bạn một số plugin miễn phí cho các bạn lười hjhj.Mình chỉ xin liệt kê thôi nhé, các bạn có thể vào trang download plugin để xem thêm chi tiết về các plugin nàyMemphis Custom LoginAdmin Customization2 plugin trên hoàn toàn phù hợp với các phiên bản wordpress mới hiện nay. Các bạn cứ cài đặt và sử dụng nhéXong, các bạn cứ code thử, nếu cần hỏi thêm gì thì cứ comment bên dưới nhé. Nhớ là ủng hộ blog cá nhân của mình với nha, cái này là tùy hỷ các bạn thôi. Vì blog ở giai đoạn mới trên khai, nhiều phần chưa hoàn thiện nên bài viết chưa được nhiều.Chân thành cảm ơn quý đại biểu, quý quan khách, hội đồng người đọc, hội đồng blogger, hội đồng bảo an wordpress toàn quốc và toàn thế giới đã đọc bài viết này !Note từ Thạch Phạm: Phát hiện đạo văn phong nha =((([signature]giao diện admingiao diện đăng nhậpthay đổi giao diện13 lượt xem | 0 bình luận Nguyễn Văn LuyếnLuôn luôn lắng nghe, lâu lâu mới hiểu Đề xuất cho bạnHướng dẫn sử dụng công cụ ký số văn bản theo Nghị định 30/2020/NĐ-CP 2 tháng trướcPhần mềm Winamp phần mềm phát nhạc một thời đã “hồi sinh” 2 tháng trướcPhần mềm chụp màn hình và ghi chú nhanh Snap IT 6 tháng trướcvnTools – Công cụ hỗ trợ chuyển chữ hoa, chữ thường, đọc số thành số…. 7 tháng trướcQuy định mới về đào tạo lái xe hạng B1, B2, C áp dụng từ ngày 1.6.2024 7 tháng trướcỨng dụng Mô phỏng 120 tình huống giao thông trên điện thoại V2.0.0 10 tháng trướcBộ cài đặt phần mềm ÔN TẬP MÔ PHỎNG phiên bản V2.0.0 10 tháng trướcHướng dẫn cập nhật phần mềm ÔN TẬP MÔ PHỎNG từ phiên bản v1.2.2 lên v1.2.3 12 tháng trước PaperPlane: Mang launcher IPad lên Windows Hướng dẫn sử dụng 1.1.1.1 VPN trên PC, cập nhật danh sách key nhận 12 triệu data WARP+ miễn phí HP làm mới dòng Envy 13 – Thiết kế tinh xảo, viền màn hình siêu mỏng, giá 19,9 triệu đồng Bình luận gần đâyAddin Word xuất Mail Merge có chức năng cắt ra…Nguyễn Văn Luyến 6 tháng trướcƯng dụng này rất hay cho người hay thực hiện các biểu mâu, thư mời,...Quy định mới về đào tạo lái xe hạng B1,…Nguyễn Văn Luyến 6 tháng trướcChuẩn bị lại lên giáTiện ích tiếng Việt trên Word năm 2022 miễn phíChuyển Đổi Số 11 tháng trướcCó trang nguồn mình tải á, bạn qua trang đó xem thử. Mình cài được bình thường áFont chữ thư pháp FZ Tiểu Tự Việt HoáChuyển Đổi Số 11 tháng trướcMỉnh cũng thấy cái gì hay hay lưu lại trên trang cá nhân khi nào cần lấy ra dùng thôi à. Cảm ơn bạn nhiều!Font chữ thư pháp FZ Tiểu Tự Việt Hoáquang tuấn 11 tháng trướcok cám ơn addTiện ích tiếng Việt trên Word năm 2022 miễn phíĐàm kiên 1 năm trướcsao không thấy hướng dẫn khắc phục lỗi the macro vậyTiện ích tiếng Việt trên Word năm 2022 miễn phíĐàm kiên 1 năm trướcfile tải về chỉ có 3 file hướng dẫn chứ không có file cài đặt nhéGoogle tung dấu tick xanh trong GmailNguyễn Văn Luyến 1 năm trướcBài viết hay Có nhiều lượt xemNewspaper v9.0 Premium WordPress Themes1379 lượt xemBộ cài đặt phần mềm ÔN TẬP MÔ PHỎNG phiên bản V2.0.01197 lượt xemTiện ích tiếng Việt trên Word năm 2022 miễn phí1095 lượt xemAddin Word xuất Mail Merge có chức năng cắt ra nhiều file và gửi mail753 lượt xemFont chữ thư pháp FZ Tiểu Tự Việt Hoá672 lượt xemZaloMessengerEmailZaloMessengerEmail Trang chủ Zalo Hỗ trợ Messenger Liên hệ Đồng ý Cookie Trang web này sử dụng Cookie để nâng cao trải nghiệm duyệt web của bạn và cung cấp các đề xuất được cá nhân hóa. Bằng cách chấp nhận để sử dụng trang web của chúng tôi Tôi chấp nhận
Thấy nhiều Guest blogger mới của Thạch viết bài chất qua, hôm nay tranh thủ viết cùng anh em cho nó máu. Qua quá trình sử dụng, mò mẫm wordpress cũng khá lâu rồi, mình thấy mọi thứ oki nhưng khi thiết kế website cho khách hàng thì người ta lại chê sao đường dẫn vào admin khó nhớ, giao diện đăng nhập thì không đẹp và đơn giản quá.
Thôi, nói nhiều quá, bắt tay code thôi nào !
Mình nghĩ chỉnh sửa cái này không phải mới nhưng ít blogger nói về điều này, nên mình xin trình bày luôn ở đây. Thông thường để đăng nhập admin trong wordpress, chúng ta thường vào //websitecuaban.com/wp-loginđúng không? Nhưng nếu bạn thiết kế website công ty khách hàng thì người ta lại nói sao khó nhớ quá. Chỉ cần một đoạn code cực kỳ đơn giản như sau, bạn có thể thay đổi đường dẫn đăng nhập admin tùy ý theo sở thích.
Bạn mở file.htaccessthêm vào trên cùng như sau
.htaccess
RewriteRule ^quocpro$ //quocmarketing.com/wp-login.php [NC,L]
Trong đó, bạn thay quocpro tùy thích , và thay thế đường link website của mình vào
Quá đơn giản phải không? Làm ngay và luôn đi các bạn
Khi vào trang đăng nhập admin, nếu vô tình click vào logo wordpress thì nó sẽ nhảy ngay vào //wordpress.org . Nếu bạn nhận dự án thiết kế website cho khách hàng thì điều này là hoàn toàn không nên. Chúng ta có thể thay đổi điều này cũng rất dễ dàng thôi. Bạn mở file function.php, nếu bạn đang sử dụng Thesis 2 giống Thạch thì thêm vào custom_functions.php , chèn thêm đoạn code này nhé
<br /> // Thay doi duong dan logo admin<br /> function wpc_url_login(){<br /> return "//quocmarketing.com/"; // duong dan vao website cua ban<br /> }<br /> add_filter('login_headerurl', 'wpc_url_login');</p> <p>
Save lại và F5 xem nào !
Tương tự bạn chèn đoạn code này vàofunction.php để thay thế logo trong trang đăng nhập wordpress. Bạn có thể hiểu đoạn code này thêm vào 1 file css cho trang đăng nhập admin. Bạn tạo một file css mới với tên tùy thích (ở đây mình đặt là login.css), ngang hàng với style.css trong theme của bạn. Không nên chèn trực tiếp vào style.css vì sẽ load chậm hơn. Nhớ sửa đường dẫn file css của bạn lại nhé
<br /> // Thay doi logo admin wordpress<br /> function login_css() {<br /> wp_enqueue_style( 'login_css', get_template_directory_uri() . '/login.css' ); // duong dan den file css moi<br /> }<br /> add_action('login_head', 'login_css');</p> <p>
Tiếp theo bạn copy và paste đoạn code css sau vào file login.css vừa tạo khi nãy, nhớ thay đổi đường dẫn đến logo của bạn. Lưu ý chiều ngang mặc định là 312px và cao là 67px các bạn nha. Nếu logo của bạn không trùng với kích thước này thì bạn phải điều chỉnh thêm padding, margin trong css để cho vị trí logo đặt vào sao cho đẹp nhất.
<br /> #login h1 a {<br /> background: url("<a href="//quocmarketing.com/wp-content/themes/henry/images/logo.png">images/logo.png</a>") no-repeat !important;<br /> }</p> <p>
Nếu bạn muốn thay đổi màu nền hay hình nền trang đăng nhập thì có thể thêm đoạn css bên dưới vào login.css, ví dụ trên trang Blog cá nhân của mình như sau
body.login {background:#008800}
Tương tự, khi bạn thay đổi màu nền và hình nền thì có lẽ màu của các text không còn phù hợp nữa, bạn thêm code css sau để sửa lại các text bên dưới trang đăng nhập, các bạn có thể tùy biến lại màu sắc sao cho đẹp nhất nhé. Code của mình như sau:
<br /> .login #nav a, .login #backtoblog a {color:#fff!important;text-shadow:none;text-decoration:none}<br /> .login #nav a:hover, .login #backtoblog a:hover {color:#ccc!important;</p> <p>
Chỉ cần lên Google search từ khóa background thì các bạn đã có sẵn một thư viện đồ sộ rồi, có thể thay đổi tùy ý nhé.
Theo mình thì với sự điều chỉnh code như trên khá nhanh và đơn giản nên không nhất thiết phải xài thêm plugin để làm gì. Tuy nhiên, mình cũng xin cung cấp thêm cho các bạn một số plugin miễn phí cho các bạn lười hjhj.
Mình chỉ xin liệt kê thôi nhé, các bạn có thể vào trang download plugin để xem thêm chi tiết về các plugin này
2 plugin trên hoàn toàn phù hợp với các phiên bản wordpress mới hiện nay. Các bạn cứ cài đặt và sử dụng nhé
Xong, các bạn cứ code thử, nếu cần hỏi thêm gì thì cứ comment bên dưới nhé. Nhớ là ủng hộ blog cá nhân của mình với nha, cái này là tùy hỷ các bạn thôi. Vì blog ở giai đoạn mới trên khai, nhiều phần chưa hoàn thiện nên bài viết chưa được nhiều.
Chân thành cảm ơn quý đại biểu, quý quan khách, hội đồng người đọc, hội đồng blogger, hội đồng bảo an wordpress toàn quốc và toàn thế giới đã đọc bài viết này !
Note từ Thạch Phạm: Phát hiện đạo văn phong nha =(((
[signature]