كيفية ربط الصور في ثيم فرعي لتخصيص صفحة الدخول والفافيكون

تُعتبر صفحات تسجيل الدخول والفافيكون جزءًا مهمًا من واجهة المستخدم لأي موقع ووردبريس. ففي بعض الأحيان، يسعى المطورون والمصممون إلى تخصيص هذه العناصر لتعكس الهوية البصرية لموقعهم بشكل أفضل. وفي هذا المقال، سنتناول كيفية ربط الصور في الثيم الفرعي لتعويض شعارات ووردبريس الافتراضية، ونوفر لك خطوات سهلة للتصميم الراقي لصفحة تسجيل الدخول والفافيكون.

كيفية إنشاء ثيم فرعي وإضافة الصور

أولاً، يجب أن تتأكد من أنك أنشأت ثيمًا فرعيًا بشكل صحيح. في العادة، يتم تخزين الصور الخاصة بك في مجلد img داخل مجلد الثيم الفرعي. على سبيل المثال، لديك صورة الفافيكون باسم "Favicon.png" وصورة الشعار باسم "Logo.png". يجب أن تكون مسارات هذه الصور صحيحة حتى يتم تحميلها بشكل صحيح عند تنفيذ الأكواد.

استخدام الأكواد لتخصيص الشعار والفافيكون

يمكنك تخصيص الشعار وفافيكون صفحة تسجيل الدخول باستخدام الأكواد التي تضيف لتيف المهام. عليك بدءًا من تعديل الرأس في موقع ووردبريس. لنفترض أنك ترغب في استبدال الشعار الافتراضي بإحدى الصور التي قمت بتحميلها. يمكنك استخدام وظيفة custom_login_logo() لتخصيص صفحة تسجيل الدخول.

if( !function_exists( 'custom_login_logo' ) ){
  function custom_login_logo() {
      echo '<style type="text/css">
          .login h1 a {
              background-image: url("'.get_stylesheet_directory_uri().'/img/Logo.png");
              background-size: contain;
              width: 100%;
              height: 80px;
          }
      </style>';
  }
  add_action( 'login_head', 'custom_login_logo' );
}

باستخدام الكود أعلاه، يمكنك تحديد موقع الصورة واستبدال الشعار الافتراضي بشكل فعال.

استبدال روابط ووردبريس في الشريط الإداري

إلى جانب تخصيص صفحة تسجيل الدخول، يمكنك أيضًا تغيير رابط الشعار في الشريط الإداري. قد يُفضل العديد من المصممين إزالة الرابط الافتراضي أو استبداله برابط آخر. يتم تحقيق ذلك بسهولة من خلال وظيفة custom_admin_bar_logo_link().

if( !function_exists( 'custom_admin_bar_logo_link' ) ){
  function custom_admin_bar_logo_link() {
      echo "
      <script type='text/javascript'>
          document.getElementById('wp-admin-bar-wp-logo').children[0].setAttribute('href', '#');
      </script>
      ";
  }
  add_action('admin_footer', 'custom_admin_bar_logo_link'); //Trigger on backend
  add_action('wp_footer', 'custom_admin_bar_logo_link'); //Trigger on front-end
}

تعديل الفافيكون في الموقع

تخصيص الفافيكون أمر مهم أيضًا لتعزيز هوية الموقع. يمكنك استبدال الفافيكون الافتراضي بإحدى صورك من خلال إضافة وظيفة بسيطة في قسم رأس الموقع.

if (!function_exists('custom_favicon')) {
    function custom_favicon() {
        echo '<link rel="icon" href="'.get_stylesheet_directory_uri().'/img/Favicon.png" sizes="32x32" />';
    }
    add_action('wp_head', 'custom_favicon');
}

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

نصائح مهمة لتحسين تخصيص الثيمات

للحصول على أفضل النتائج عند تخصيص الثيم الفرعي، احرص على أن تكون صورك بحجم مناسب وأن تُصمم بشكل احترافي. من المستحسن أيضًا إجراء اختبارات بعد كل تعديل للتأكد من أن كل شيء يعمل كما هو متوقع. كما يجب أن تتأكد من أن المسارات إلى الصور صحيحة وأن الصور متاحة في الموقع.

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

من المهم فهم كيفية ربط الصور في الثيم الفرعي إذا كنت ترغب في تصميم صفحة تسجيل دخول شخصية وفافيكون لتستبدل شعارات ووردبريس. كن دائمًا مبدعًا واستمتع بعملية التصميم!