تغيير شعار ورابط ترويسة صفحة الدخول

تم تحديث المقالة لاضافة بعض اكواد الـ css لتتوافق مع ووردبريس 4.1.1

يضع ووردبريس في صفحة تسجيل الدخول شعاره الخاص فوق نموذج تسجيل الدخول وكذلك عند الضغط على هذا الشعار يتم التوجه لموقع ووردبريس الرسمي، لا يعجبك هذا وتريد ان تضع شعارك الخاص ورابط موقعك؟، اذا كانت اجابتك نعم فاكمل قراءة هذا التلميح لتعرف كيف تقوم بذلك.

change_default_login_header_logo_ and_url_01

فلنبدأ..
اولا عليك تجهيز الصورة او الشعار الذي تريد وضعه بدلا من الافتراضي، سأفترض ان الشعار الجديد اسمه mylogo.png وموجود بداخل مجلد image بداخل القالب الذي تستخدمه .. قم بوضع هذا الكود في ملف functions.php الخاص بالقالب:

function arwp_loginLogo() {

	$logoUrl = get_stylesheet_directory_uri() . '/images/mylogo.png';
	
	echo '<style> .login h1 a { background-image: url(' . $logoUrl . '); background-size: auto; width:180px; height:80px;} </style>' ;
}

add_action( 'login_head', 'arwp_loginLogo' );
لاحظ، في الكود السابق ستغير width:180px; height:80px; الى ابعاد الصورة التي استخدمتها كشعار

بعد حفظ الملف .. الآن اذهب الى صفحة تسجيل الدخول، ستجد ان الشعار قد تم استبداله بشعارك الخاص، شيء جميل .. هذا ما تريده اليس كذلك؟، لكن هناك مشكلة بسيطة، عندما تضع مؤشر الفأرة على الشعار تظهر عبارة “يعمل بواسطة برنامج ووردبريس” .. لا تقلق يمكن تغيير هذا تابع..

إذاً، فلنفترض انك تريد تغيير هذه العبارة الى عنوان موقعك، سنستخدم الآن فلتر login_headertitle لنفعل ذلك، ضع هذا الكود ايضا في ملف functions.php:

function arwp_loginTitle( $title ) {

	return get_bloginfo( 'name' );
}

add_filter( 'login_headertitle', 'arwp_loginTitle' );

قم بحفظ الملف .. واعمل تحديث لصفحة تسجيل الدخول وضع مؤشر الفارة على شعارك .. عنوان موقعك يظهر الآن بدلا من العبارة الافتراضية.

الآن كل شيء جيد بالنسبة لك .. تقوم بالضغط على الشعار للرجوع إلى رئيسية موقعك، لكن ما حدث انك ذهبت إلى wordpress.org، ابتسم فمازال يمكنك السيطرة على الامر :).

استخدم فلتر login_headerurl لتجعل الأمر في صالحك، ستضع هذا الكود في ملف functions.php الخاص بقالبك كذلك:

function arwp_loginUrl( $url ) {
	
	return home_url();
}

add_filter( 'login_headerurl', 'arwp_loginUrl' );

الآن بحد حفظ ملف functions.php للمرة الثالثة .. قم بتحديث صفحة تسجيل الدخول، شعارك الخاص يظهر .. جيد، عند وضع مؤشر الفأرة عليه يظهر اسم موقعك .. جيد، عند الضغط عليه تذهب الى رئيسية موقعك .. رائع جدا، انتهى الأمر .. يمكنك الرجوع الى صفحة تسجيل الدخول لتتاكد مرة أخرى 😀

32 تعليق

  1. شرح ممتاز ومفيد بارك الله فى من قام به
    فريق عرب وردبرس يستحق الاشاده والتكريم
    زادكم الله من علمه

  2. مشكور استاذ رشيد ..
    لدي استفسار، هل يوجد طريقة لتغيير حجم الصورة (العرض و الطول ) إن كان ممكنا؟

    • بعد اذن كاتب الموضوع واجهتني المشكلة هذي ان الشعار صار مربع وصغير .. بحث سريع في جوجل حصلت جواب


      // CUSTOM ADMIN LOGIN HEADER LOGO
      function my_custom_login_logo() {
      echo ‘
      .login h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/images/wp_sign-in_logo.png) !important;
      background-size:269px 62px;
      width:269px;
      height:62px; }
      ‘;
      }

      add_action(‘login_head’, ‘my_custom_login_logo’);

      /images/wp_sign-in_logo.png هو اسم الصورة في مجلد images داخل القالب.

      المصدر
      http://wordpress.org/support/topic/38-wordpress-logo-login

      • عشان يكون الكود واضح بكتبه هنا بروحه

        // CUSTOM ADMIN LOGIN HEADER LOGO
        function my_custom_login_logo() {
        echo ‘
        .login h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/images/wp_sign-in_logo.png) !important;
        background-size:269px 62px;
        width:269px;
        height:62px; }
        ‘;
        }

        add_action(‘login_head’, ‘my_custom_login_logo’);

  3. السلام عليكم ورحمة الله
    انا لآ اعلم شيئ عن الوردبريس وعندى موقع مصممه html – css
    عايز اعمل الموقع ده بحيث انى انزل عليه كتب يعنى يكون ديناميك ما يكون ثابت
    أرجو ان أكون وضحت المطلوب
    ارجو الرد
    شكرا لكم

    • راجع أولا الدروس الموجودة في المدونة عن طريقة تركيب ووردبريس ثم يمكنك بعدها تعلم كيفية التعديل على قوالب ووردبريس لتصنع القالب الخاص بك.

  4. تنبيه: تغيير شعار ورابط ترويسة صفحة الدخول | موقع لأجلكــ :)

  5. ممكن شرح للنسخة 3.8.1 لانو أنا ما فلح معي الأمر وممكن توضيح مكان الكود بالضبط داخل الملف

    • بالنسبة لمكان الكود، يوضع في ملف functions.php الخاص بالقالب الذي تستخدمه بأي مكان بالملف ولكن خارج اي دالة اخرى، ممكن في نهاية الملف مثلا.
      بالنسبة لووردبريس 3.8.1، هي نفس الطريقة تمام لكن سيكون هناك تعديل بسيط في CSS فقط.

  6. السلام عليكم

    الشرح ممتاز و الطريقه متميزه

    ولكن لا تعمل مه النسخه الاخيره 🙁

    هل يمكن إعادة الشرح للنسخه الاخيره

  7. السلام عليكم اخي الموضوع كتير جميل لكن انا واجهتني مشكلة خظأ فادح بعد تطبيق الخطوات التي اشرت اليها حضرتك ولم أفلح في تفادي الخطأ

    Fatal error: Call to undefined function serpentsoft_get_data() in /home/u*******/public_html/wp-content/themes/*****/header.php on line 24

    ماهي طريقة حل هذه المشكلة جزاك الله خيرا

  8. السلام عليكم أنا لم يشتغل علما أنني أستعمل إصدار 4.1.1 ماهو التعديل الذي سيكون على CSS أستعملت نفس الفاكشنات واللوجو اختفى تماما ، أخذت فنكشن الكوديكس وردبريس نفس المشكل ليس هناك خطأ لكن أعتقد أن هناك تعديل يجب أن يكون على ملف CSS?????

  9. لدي آخر إصدار وردبريس لكن في الشرح لابد أن هناك شيء غير واضح كررت العملية مئات المرات أبعاد الشعار الجديد لدي 180 /143 لكن النتيجة الكل مخفي حتى الأصلي

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *