آموزش ساخت تنظیمات سربرگ برای پوسته‌های وردپرس

در نگاهی به آناتومی پوسته‌های وردپرس، سربرگ را می‌توان به عنوان یکی از اصلی‌ترین و مهم‌ترین قسمت‌های ساختار قالب وردپرس معرفی کرد چرا که سربرگ یا همان هدر پوسته می‌تواند نقش مهم و بسزایی را در رابط کاربری ایفا کند و انتخابِ سربرگی مناسب و مرتبط با طرح و رنگ و موضوع سایت می‌تواند تاثیر مثبتی را در ذهن مخاطبان سایت و یا وبلاگ شما ایجاد کند.

یکی از ویژگی‌ها و تغییرات تازه در پوسته محرم وردپرس که پیش از شروع ماه محرم نگارش تازه‌ی آن را به اشتراک خواهیم گذاشت امکان انتخاب تصویر سربرگ از میان سربرگ‌های اختصاصی پوسته و یا بارگذاری سربرگ مورد نظر توسط کاربر می‌باشد که در این نوشته از وبلاگ هاستینگ ماندگار وب برای استفاده شما عزیزان از این امکان در طرح‌ها و یا پوسته‌هایتان آموزش چگونگی ایجاد و ساخت تنظیمات سربرگ (هدر) برای قالب‌های وردپرس را بصورت کامل برای شما دوستان وردپرسی شرح خواهیم داد.

تنظیمات سربرگ برای پوسته وردپرس

برای اضافه کردن تنظیمات سربرگ به قالب‌های وردپرس تنها نیاز به ویرایش فایل فانکشن پوسته خود دارید که پیشنهاد می‌کنیم برای اطمینان پیش از ایجاد هرگونه تغییری در این فایل از آن نسخه‌ی پشتیبان تهیه نمایید تا در صورت بروز خطا آنرا براحتی به حالت اول بازگردانید. چنانچه تمایل دارید ساختار تنظیمات سربرگ در پیشخوان شما همانند ساختار پوسته‌های پیش‌فرض وردپرس که در آن امکان بارگذاری سربرگ وجود دارد، باشد تنها کافیست دستور زیر را به فایل فانکشن پوسته وردپرس اضافه نمایید:

add_theme_support( 'custom-header' );

با اضافه کردن دستور فوق به فایل فانکشن، تنظیمات سربرگ در فهرست اصلی پیشخوان وردپرس شما اضافه گردیده است که امکان بارگذاری سربرگ را برای کاربران فراهم می‌سازد.

چنانچه در حالت اول نیاز شما رفع نگردیده است و تمایل دارید از ویژگی‌های دیگری همانند انتخاب یک تصویر به عنوان تصویر پیش فرض و قرار دادن چندین سربرگ بصورت آماده در تنظیمات سربرگ بهره ببرید می‌توانید از دستورات زیر که برای قالب محرم وردپرس در نظر گرفته شده‌اند استفاده کنید:

<?php
add_action( 'after_setup_theme', 'mandegarweb_setup' );
if ( ! function_exists('mandegarweb_setup') ):
function mandegarweb_setup() {
define( 'HEADER_TEXTCOLOR', '' );
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'mandegarweb_header_image_width', 950 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'mandegarweb_header_image_height',    250 ) );
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
define( 'NO_HEADER_TEXT', true );
add_custom_image_header( '', 'mandegarweb_admin_header_style' );
register_default_headers( array (
'default' => array (
'url' => '%s/img/headers/default.png',
'thumbnail_url' => '%s/img/headers/default.png',
'description' => __( 'default', 'mandegarweb' )
),
'1' => array (
'url' => '%s/img/headers/1.png',
'thumbnail_url' => '%s/img/headers/1.png',
'description' => __( '1', 'mandegarweb' )
),
'2' => array (
'url' => '%s/img/headers/2.png',
'thumbnail_url' => '%s/img/headers/2.png',
'description' => __( '2', 'mandegarweb' )
),
'3' => array (
'url' => '%s/img/headers/3.png',
'thumbnail_url' => '%s/img/headers/3.png',
'description' => __( '3', 'mandegarweb' )
)
) );
}
endif;
if ( ! function_exists( 'mandegarweb_admin_header_style' ) ) :
function mandegarweb_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;
?>

با قرار گرفتن دستورات فوق در فایل فانکشن پوسته وردپرس، قابلیت بارگذاری خودکار تصویری به عنوان هدر پیش‌فرض فراهم می‌گردد همچنین سه سربرگ به عنوان سربرگ‌های آماده به تنظیمات سربرگ اضافه می‌گردد که شما می‌توانید همانند دستورات آمده تعداد سربرگ‌ها را به تعداد مورد نظر خود افزایش دهید. لازم به ذکر است اندازه‌ی سربرگ در دستور 250×950 پیکسل تعیین شده است که شما می‌توانید آنرا به اندازه‌ی مورد پسند خود تغییر دهید.

در مرحله‌ی آخر تنها نیاز دارید خروجی تنظیمات را در محل مناسبی از پوسته خود (header.php) قرار دهید، همانطور که می‌دانید تقریبا در تمام پوسته‌ها تصویر سربرگ از طریق فایل css استایل فراخوان می‌شود که شما برای عملکرد صحیح این آموزش وردپرس دستورات زیر را بعد از تابع wp_head قرار دهید:

<?php
$header_image = get_header_image();
if ( ! empty( $header_image ) ) { ?>
<style type="text/css">
#header{background: url(<?php header_image(); ?>)  #292929;}
</style>
<?php } else { ?>
<style type="text/css">
#header{background: url(<?php bloginfo('template_directory'); ?>/img/headers/default.png)  #292929;}
</style>
<?php } ?>

در خط بالا تصویر سربرگ جایگزین تصویری می‌شود که از آیدی header فراخوان می‌شود در نتیجه شما نیز باید آیدی و یا کلاسی را که برای سربرگ پوسته خود تعریف نموده‌اید جایگزین کد بالا کنید.

این قابلیت نیز آرگومان‌های گوناگونِ دیگری را نیز شامل می‌شود که می‌توانید لیست کامل آنها را در مستندات وردپرس تماشا کنید، امیدوار هستیم آموزش اضافه کردن تنظیمات هدر به قالب‌های وردپرس مورد پسند شما دوستان عزیز قرار گرفته باشد.


کانال تلگرام ماندگار وب

  1. میلاد

    سلام،
    یه سوال داشتم البته ربطی به مطلب بالا نداره،
    کد های بالا رو چطوری توی پست گذاشتید که شبیه جدول اومده؟
    مرسی.

    1. امیر خلجی مهر

      سلام میلاد جان

      از این افزونه استفاده میکنیم
      موفق باشید

        1. امیر خلجی مهر

          خواهش میکنم میلاد عزیز

  2. ساسان

    سلام
    ممنون از مقالات و بروز رسانی های مستمر بخش وبلاگ سایت 🙂

    1. امیر خلجی مهر

      سلام
      خواهش میکنم ساسان جان

  3. Black_Sky

    قالب محرم براي امسال هم ويرايش ميشود؟
    بابا ايوال

    1. امیر خلجی مهر

      بله مهدی جان از نظر سئو و بهینه سازی مورد ویرایش قرار گرفته که مهمترین تغییر استفاده از روشی جدید برای حذف فایل آر تی ال بوده که بزودی آموزش اختصاصی رو در اختیار کاربران میگذارم
      امکانات و ویژگیهای جدیدی نیز به پوسته اضافه شده که امیدوارم مورد توجه دوستان قرار بگیره

  4. سبز کود

    سلام
    خیلی ممنون از اموزش های وردپرسی..منبع خوبی برای ترفند ها و اموزش هستید 🙂

    1. امیر خلجی مهر

      خواهش میکنم دوست گرامی

  5. علیرضا

    امیر اقا یک سوال داشتم. یک سایت خبری دارم. با موضوعات مختلف. با این کد اولیه که نوشتی، وقتی مخاطب وارد هر موضوع میشه، h1 اون صفحه رو میشه برای اون موضوع خاص بهینه کرد تا برای هر موضوع یک h1 باز بشه. مثلا وقتی طرف وارد خبری در مورد ورزش شد، بالای صفحه h1 در مورد ورزش باشه و همینطور وقتی وارد اقتصاد شد، h1 در مورد اقتصاد باشه؟ ایا میشه؟ چطوری؟

    1. امیر خلجی مهر

      خب اگه منظور شما مشخص کردن نام هر دسته بندی در h1 هست که کار ساده ای هست و کافی از تابع مربوطه در h1 استفاده کنید
      اگه منظورتون گذاشتن کلمات کلیدی مرتبط با هر دسته بندی در h1 هست این هم شدنی هست که باید از دستور شرطی استفاده کنید
      توضیح زیادی برای گزینه دوم نیاز هست که باید مشکل در انجمن مطرح شود
      موفق باشید

  6. علیرضا

    یه سوال دیگه، برای اینکه بخش نظراتتمون مثل سایت شما خوشکل بشه چیکار باید بکنیم؟

    1. امیر خلجی مهر

      قربونتون برم باید به دیدگاه های سایتتون استایل بدید
      در این رابطه هم دوستان در انجمن میتونند شما را راهنمایی کنند

  7. بازتاب: ایجاد تنظیمات سربرگ برای پوسته ها | خانه وردپرس
  8. فضیله

    با سلام
    من یه وب سایت با وردپرس دارم. میخوام یه صفحه ای توش ایجاد کنم که هدر سایت نداشته باشه. وقتی با خود سی ام اس وردپرس این کار رو مکنم، اون وب پیج رو داخل قالب سایت میزاره. من اینو نمیخوام. به صفحه ای احتیاج دارم که ساده و بدون هدر و فوتر خود سایت باشه. آیا امکانش هست؟
    اگه هست چگونه باید اینکار را بکنم؟

    1. امیر خلجی مهر

      درود
      باید تمپلت بسازید برای دریافت راهنمایی های بیشتر موضوع را در انجمن مطرح کنید
      موفق باشید

  9. آرش

    سلام
    می شه بگید دقیقا این کدها رو کجا باید اضافه کنیم ؟

    1. امیر خلجی مهر

      نوشته رو کامل مطالعه کنید متوجه خواهید شد

  10. سمانه

    سلام لطفا کمکم کنین من میخوام واسه پایان نامم یه سایت گردشگری طراحی کنم ولی تعدادصفحاتم خیلی زیاد میشن
    میشه بگین چطور میشه یه صفحه با مطالب مختلف طراحی کرد که بعد با فراخونیش همون صفحه با مطالب دلخواه ظاهرشه؟ ممنونم

    1. امیر خلجی مهر

      درود بر شما

      وردپرس قابلیت برگه بندی رو به همراه تعیین تعداد نوشته ها داره
      بهتره در انجمن مطرح کنید تا دوستان شما رو راهنمایی بفرمایند.

  11. حسین

    سلام این کدی که گفتین رو تو functions.php زدم و کار کرد ولی به ازای این کد باید چه کدی توی header.php بزنم که عکس انتخاب شده رو بگبره؟ و چه جوری می تونم یه سایز فیکس به عکس بدم که اندازش تغییر نکنه؟

    1. امیر خلجی مهر

      درود

      همه چیز کاملاً مشخص هست، انتخاب تصویر در پیشخوان > نمایش > سربرگ مشخص میگردد
      اندازه هم در فایل هدر قابل تغییر هست

      1. حسین

        سلام.منظور من این بود که چه کدی در header.php بزنم که به جای img یا div قرار بگیره و هر دفعه که سربرگ رو تغییر میدم تغییر کنه نه اینکه خاصیت سربرگ فعال بشه اما عکس سربرگ تغییر نکنه و اندازه هم من چه جوری به صورت کد بنویسم که کاربر نتونه اندازه ای غیر از اون بده.ممنون.

        1. امیر خلجی مهر

          درود

          حسین جان لطف کنید در انجمن مطرح کنید، حقیقتاً متوجه فرمایشتون نمیشم و فکر میکنم خواسته ی شما ارتباطی با این نوشته نداره، به هر حال در انجمن خیلی زودتر نتیجه و پاسخ خواهید گرفت
          موفق باشید

    1. امیر خلجی مهر

      به به حسن آقای گل 😉
      قربونتون حسن جان 🙂

  12. fr

    سلام
    من این کد رو اضافه کردم ولی عکسم نمایش داده نمیشه

    درواقع توی view page source ام اصن آدرس عکس وجود نداره فقط اینو تو فانکشن زدم

    اینم تو کد های هدر اضافه کردم

    1. امیر خلجی مهر

      درود

      دوست خوبم یک بار دیگه با دقت نوشته رو مطالعه کنید و در صورت وجود مشکل اونرو در انجمن مطرح کنید تا دوستان شما رو راهنمایی کنند
      موفق باشید

  13. aydin

    سلام من میخواستم سربرگ رو به قالب دیگه اضافه کنم اضافه هم کردم تو تنظیمات سفارسی سازی و اومد و تصویر هم انتخاب کردم اما نوشت پوسته شما 0ارتفاع 0 مگا پیکسل را پیشنهاد میکنه بعدشم تصیر رو نمایش نمیده چیکار کنم نمایش بده و ارتفا عم حدود 300 یا 250 پیکسل باشه

    1. امیر خلجی مهر

      درود
      تو این قسمت ما اندازه‌ تعریف کردیم

      define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘mandegarweb_header_image_width’, 950 ) );
      define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘mandegarweb_header_image_height’, 250 ) );

  14. moosavi

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

    1. امیر خلجی مهر

      درود
      دوست من تو کدهای آموزش یه قسمتی برای تعریف کردن اندازه وجود داره و تا جایی که یادم میاد زمانی که سربرگ رو بارگذاری میکنید، وردپرس به شما اجازه‌ی کراپ کردن میده

  15. مرتضی

    با عرض تشکر از راهنماییهاتون ..اما من خیلی ناشی هستم و 2روز پیش تصمیم به ثبت سایتی گرفتم (قبلا وبلاگ )داشتم /از پوسته glow خوشم امده و خواستم هدر ان را باب میلم تغییر بدهم اما از کدنویسی چیری نمیدونم میشه راهنمایی بفرمایید ادرس عکس دلخواه را باید در کجای کد های قالب بگذارم تا عکس دلخواهم نمایش داده شود ؟

  16. رضا م

    با عرض سلام و خسته نباشید
    ببخشید به یه مشکلی خوردم ممنون میشم کمکم کنید
    هر قالبی که توی وردپرس انتخاب میکنم ، از قسمت سفارشی سازی ، وقتی میخوام برای هدر اسم سایتمو بزنم ، بعد از ذخیره ، به جای حروف ، علامت سوال نشون میده . ممنون میشم راهنمایی کنید

  17. َامیرحسین

    سلام یه سوال داشتم البته ربطی به مطلب بالا نداره ولی ممنون میشم اگر کسی پاسخ رو بلده یکم راهنمایی کنه
    یه قالب وردپرس طراحی دارم میکنم که در صفحه اصلی 3 تا عکس زیر هم دارم میخام کاری کنم که از طریخ پنل مدیریتی وردپرس این عکس هارو هر کدوم که خاستم تغییر بدم دیگه کدنویسی نکنم

    1. امیر خلجی مهر

      درود
      باید برای پوسته پنل تنظیمات در نظر بگیرید.

  18. امیرحسین

    چطوری میتونم اینکارو بکن ایا مطلب اموزشی دارید لینکش رو بهم بدید ممنونم

    1. امیر خلجی مهر

      آموزشی رو ندارم، اما جستجو که کنید حتما به نتیجه میرسید
      برای این پوسته آپشنی در نظر گرفتم، اگه با php آشنایی داشته باشید، کارتون راه میوفته.
      شاد و پیروز باشید

  19. شادی

    فایل فانکشن پوسته وردپرس کجاست؟ میشه لطفا راهنمایی کنید
    من برای سایتم در سربرگ ،متن متحرک میخوام اضافه کنم اما موفق نمیشم

    1. امیر خلجی مهر

      فایل فانکشن در مسیر اصلی پوسته وردپرس هست
      اگر این فایل را ندارید، میتوانید آن‌را بسازید و کدهای خود را درون آن قرار دهید.

  20. fara

    سلام خسته نباشید
    این فایل فانکشن کجاست؟
    از کجا بیارمش؟
    پ
    چه مسیری رو باید برم تا فایل فعال بشه و بتونم ویرایشش کنم؟

  21. fara

    چه جوری ساخته میشه؟ فایل فانکشن وردپرس

    1. امیر خلجی مهر

      درود
      فایل فانکشن در مسیر اصلی پوسته وردپرس است، در کنار فایل‌هایی همانند: index, page,search و… اگر این فایل را ندارید میتوانید آن‌را با نام functions.php ایجاد کنید.

دیدگاه خود را بنویسید

تنها دیدگاه‌هایی که به فارسی نوشته می‌شوند پذیرفته خواهند شد!

ماندگار وب - 1395
فروش - خرید هاست وردپرس فارسی