سفارشی سازی مدیریت وردپرس (۱) – صفحه ورود

در این قسمت می خواهیم نحوه تغییر در صفحه  ورود وردپرس رو آموزش بدیم . صفحه ورود وردپرس از جهت طراحی خوبه ولی هر خوبی وقتی تکراری بشه …. !

در این آموزش ابتدا یاد می گیریم که چطور لوگو رو تغییر بدیم . بعد هم تغییر استایل دکمه و متن ها و … .

خب شروع می کنیم :

۱-ساخت پلاگین

برای این کار یک فایل به نام paaz-cutom-wp-logo.php درست می کنیم . در ابتدای فایل کد زیر رو قرار می دیم تا افزونه رو معرفی کنیم .

/*
Plugin Name: Paaz Custom WP logo
Plugin URI: http://paaz.ir
Description: Customizing the wp logo in the login page.
Version: 1.0
Author: Mahdi Amani
Author URI: http://paaz.ir
License: GPLv2
*/

۲- آماده کردن لوگو

خب حالا وقتشه که لوگو رو اضافه کنیم . یه فولدر درست کنید و اسمش رو image بگذارید و فایل لوگو (logo.png) رو توش کپی کنید . حالا کد زیر رو به افزونه اضافه کنید .

//  new logo in the login page
function paaz_login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url( <?php echo plugins_url( 'image/logo.png' , __FILE__ ); ?> );
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'paaz_login_logo' );
?>

۳- تنظیم اندازه لوگو

بعضی مواقع یا بهتر بگم اکثر مواقع اندازه پیش فرض لوگو به کار ما نمیاد و باید تغییرش بدیم . برای همیناین دو خط کد رو هم در پایین خط background-image اضافه می کنیم .

            background-size: 300px auto;
            height: 70px;

۴- تغییر پیوند ها

خب حالا برای اینکه رنگ پیوند ها رو هم تغییر بدیم کد زیر رو هم اضافه می کنیم . ( البته بعد از کدی که بالا گفتیم )

        .login #nav a, .login #backtoblog a {
            color: #FF0000 !important;
        }
        .login #nav a:hover, .login #backtoblog a:hover {
            color: #990000 !important;
        }

با این کار پیوند ها قرمز می شن البته می تونید خودتون هر رنگی که دوست داشتید بگذارید .

۵- تغییر دکمه ورود

برای تغییر رنگ دکمه هم از گرادینت ( ترکیب دو رنگی ) استفاده می کنیم . که کدش در پایین هستش :

        .login .button-primary {
            background: #27adab; /* Old browsers */
            background: -moz-linear-gradient(top, #27adab 0%, #135655 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27adab), color-stop(100%,#135655)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #27adab 0%,#135655 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #27adab 0%,#135655 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #27adab 0%,#135655 100%); /* IE10+ */
            background: linear-gradient(to bottom, #27adab 0%,#135655 100%); /* W3C */
        }
        .login .button-primary:hover {
            background: #85aaaa; /* Old browsers */
            background: -moz-linear-gradient(top, #85aaaa 0%, #208e8c 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85aaaa), color-stop(100%,#208e8c)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* IE10+ */
            background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%); /* W3C */
        }

اگر می خواید به راحتی به طور آنلاین گرادینت درست کنید می تونید از این سایت استفاده کنید .

در آخر هم کدتون باید این شکلی شده باشه !

/*
Plugin Name: Paaz Custom WP logo
Plugin URI: http://paaz.ir
Description: Customizing the wp logo in the login page.
Version: 1.0
Author: Mahdi Amani
Author URI: http://paaz.ir
License: GPLv2
*/
//  new logo in the login page
function paaz_login_logo() { ?>
    <style type="text/css">
        .login #login h1 a {
            background-image: url( <?php echo plugins_url( 'image/logo.png' , __FILE__ ); ?> );
            background-size: 300px auto;
            height: 70px;
        }
        .login #nav a, .login #backtoblog a {
            color: #FF0000 !important;
        }
        .login #nav a:hover, .login #backtoblog a:hover {
            color: #990000 !important;
        }
        .login .button-primary {
            background: #27adab; /* Old browsers */
            background: -moz-linear-gradient(top, #27adab 0%, #135655 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27adab), color-stop(100%,#135655)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #27adab 0%,#135655 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #27adab 0%,#135655 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #27adab 0%,#135655 100%); /* IE10+ */
            background: linear-gradient(to bottom, #27adab 0%,#135655 100%); /* W3C */
        }
        .login .button-primary:hover {
            background: #85aaaa; /* Old browsers */
            background: -moz-linear-gradient(top, #85aaaa 0%, #208e8c 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85aaaa), color-stop(100%,#208e8c)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* IE10+ */
            background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%); /* W3C */
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'paaz_login_logo' );
?>

ان شالله در قسمت های بعد با تغییرات دیگه بخش مدیریت آشنا خواهید شد !