إذا لم تتح لك الفرصة يا رفاق لاختبار ووردبريس 3.0 ، فأنت في عداد المفقودين. لقد أنشأنا العديد من الوظائف عن وورد ميزات 3.0 وأظهرت ورد 3.0 لقطات كذلك. أحد التحديثات الجديرة بالملاحظة في هذا الإصدار هو سمة افتراضية جديدة تسمى Twenty Ten . يحتوي هذا المظهر على الكثير من الميزات الرائعة التي تم تمكينها ، ولكن إحدى الميزات التي يريدها الكثير من المستخدمين هي لوحة الرؤوس المخصصة. في هذه المقالة ، سنطلعك على كيفية تمكين الرؤوس المخصصة باستخدام لوحة تحكم خلفية في ووردبريس 3.0.
ماذا ستفعل هذه الميزة بالضبط؟
سيتم إنشاء علامة تبويب في لوحة الإدارة الخاصة بك والتي ستسمح لك بتغيير صور الرأس. يمكنك تسجيل الصور الافتراضية إذا كنت مصمم سمات لمنح المستخدمين المزيد من الخيارات. كما يسمح للمستخدمين بتحميل صور مخصصة للرأس. أخيرًا وليس آخرًا ، تستخدم هذه الميزة الصور المصغرة للنشر على صفحات المنشورات الفردية. إذا كانت الصورة المصغرة لمشاركتك كبيرة بما يكفي لتلائم حجم العنوان ، فستستخدم الصورة المصغرة لمشاركتك كرأس بدلاً من الصورة الافتراضية. إذا كانت الصورة المصغرة الخاصة بك أكبر ، فستقوم بقصها لك.
رأس مخصص في ووردبريس 3.0
مشاهدة سكرينكاست
أخذنا الكود مباشرة من ملف وظائف Twenty Ten . تحتاج إلى لصق الرموز التالية في موضوع الخاص بك functions.php الملف.
<?php
/** Tell WordPress to run yourtheme_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'yourtheme_setup' );
if ( ! function_exists('yourtheme_setup') ):
/**
* @uses add_custom_image_header() To add support for a custom header.
* @uses register_default_headers() To register the default custom header images provided with the theme.
*
* @since 3.0.0
*/
function yourtheme_setup() {
// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );
// Your changeable header business starts here
define( 'HEADER_TEXTCOLOR', '' );
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/forestfloor.jpg' );
// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to yourtheme_header_image_width and yourtheme_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height', 198 ) );
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 940 pixels wide by 198 pixels tall (larger images will be auto-cropped to fit).
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
// Don't support text inside the header image.
define( 'NO_HEADER_TEXT', true );
// Add a way for the custom header to be styled in the admin panel that controls
// custom headers. See yourtheme_admin_header_style(), below.
add_custom_image_header( '', 'yourtheme_admin_header_style' );
// … and thus ends the changeable header business.
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array (
'berries' => array (
'url' => '%s/images/headers/berries.jpg',
'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
'description' => __( 'Berries', 'yourtheme' )
),
'cherryblossom' => array (
'url' => '%s/images/headers/cherryblossoms.jpg',
'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
'description' => __( 'Cherry Blossoms', 'yourtheme' )
),
'concave' => array (
'url' => '%s/images/headers/concave.jpg',
'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
'description' => __( 'Concave', 'yourtheme' )
),
'fern' => array (
'url' => '%s/images/headers/fern.jpg',
'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
'description' => __( 'Fern', 'yourtheme' )
),
'forestfloor' => array (
'url' => '%s/images/headers/forestfloor.jpg',
'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg',
'description' => __( 'Forest Floor', 'yourtheme' )
),
'inkwell' => array (
'url' => '%s/images/headers/inkwell.jpg',
'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg',
'description' => __( 'Inkwell', 'yourtheme' )
),
'path' => array (
'url' => '%s/images/headers/path.jpg',
'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg',
'description' => __( 'Path', 'yourtheme' )
),
'sunset' => array (
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
'description' => __( 'Sunset', 'yourtheme' )
)
) );
}
endif;
if ( ! function_exists( 'yourtheme_admin_header_style' ) ) :
/**
* Styles the header image displayed on the Appearance > Header admin panel.
*
* Referenced via add_custom_image_header() in yourtheme_setup().
*
* @since 3.0.0
*/
function yourtheme_admin_header_style() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;
?>بالطبع ، قد يبدو هذا مبتذلًا لبعضكم. هذا في الغالب لمصممي السمات ، لكننا سنبذل قصارى جهدنا لكسرها. قبل أن نبدأ ، تأكد من نسخ هذا الرمز ولصقه في محرر التعليمات البرمجية الخاص بك ، حتى تتمكن من إجراء التغييرات اللازمة.
ملاحظة: نحن نستخدم / images / headers / كدليل حيث ستخزن فيه صور الرأس الافتراضية.
تبدأ الكود عن طريق إنشاء دالة yourtheme_setup ().
في السطر 21 ، نحدد صورة الرأس الافتراضية. لاحظ أن هناك متغير٪ s والذي يعد في الأساس عنصرًا نائبًا لمعرف URI لدليل السمة.
السطر 25 و 26 هو المكان الذي تحدد فيه عرض الصورة وارتفاعها. يتم تعيينه افتراضيًا على 940 بكسل عرضًا وارتفاع 198 بكسل. يمكنك تغييره بتحرير هذين السطرين.
بدءًا من السطر 42 ، نبدأ في تسجيل الرؤوس الافتراضية. هذه هي الصور التي ستظهر كخيار زر اختيار في لوحة الإدارة الخاصة بك. إذا كنت بحاجة إلى مزيد من الخيارات ، فما عليك سوى اتباع التنسيق المستخدم.
في السطر 95 ، نختار تصميم الرأس. لا تحتاج إلى تغيير هذه الإعدادات لأنك حددتها بالفعل في السطر 25 و 26.
هذا هو كل ما تفعله لملف function.php الخاص بالثيم. بعد ذلك ، سننتقل إلى كيفية إضافة هذا إلى المظهر الخاص بك.
من المرجح أن يتم وضع هذا الرمز في ملف header.php الخاص بالنسق . يمكنك تصميمه كيفما تشاء.
<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail') ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// We have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>ماذا يفعل هذا الرمز؟
أولاً ، يتم التحقق مما إذا كان منشورًا واحدًا أم صفحة. كما يتحقق أيضًا مما إذا كانت هذه المشاركة / الصفحة تحتوي على صورة مصغرة ، وما إذا كانت كبيرة بما يكفي.
إذا كانت الصفحة عبارة عن صفحة واحدة وتحتوي على صورة مصغرة كبيرة بدرجة كافية ، فإنها تعرض الصورة المصغرة للنشر الخاصة بهذا المنشور.
إذا لم تكن صفحة واحدة ، أو لم تكن الصورة المصغرة للنشر كبيرة بما يكفي ، فستظهر العنوان الافتراضي.
نأمل أن يكون هذا البرنامج التعليمي مفيدًا. لقد تلقينا بعض رسائل البريد الإلكتروني التي تسأل عن هذا البرنامج التعليمي ، لذلك قمنا بتفكيك الكود من موضوع Twenty Ten. إذا كان لديك أي أسئلة ، فلا تتردد في طرحها في التعليقات.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
