چگونه هدر وردپرس خود را سفارشی کنید (راهنمای مبتدیان)

بهبود وب سایت وردپرس خود با یک هدر سفارشی یک ایده عالی برای طراحی و تجربه کاربری است.

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

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

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

هدر در وردپرس چیست؟

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

به عنوان مثال، اینجا ناحیه سرصفحه ما در WPBeginner است که میلیون ها خواننده ماهانه آن را می بینند.

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

در بخش‌های بعدی، به شما نشان خواهیم داد که چگونه هدر وردپرس خود را به راحتی سفارشی کنید. می توانید از پیوندهای زیر برای رفتن به بخشی که می خواهید بخوانید استفاده کنید:

آماده اید؟ بیایید شروع کنیم.

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

موضوعات محبوب وردپرس به شما این امکان را می‌دهند که از سفارشی‌کننده تم وردپرس برای ایجاد تغییرات در ناحیه سربرگ سایت خود استفاده کنید. گاهی اوقات این ویژگی سرصفحه سفارشی نامیده می شود، اما توجه داشته باشید که همه تم ها از آن پشتیبانی نمی کنند.

شما باید با پیمایش به ظاهر » سفارشی کردن در ناحیه مدیریت وردپرس خود شروع کنید.

موضوع شما ممکن است شامل یک بخش “سرصفحه” در سفارشی ساز باشد یا گزینه های سرصفحه را در بخش “رنگ” ارائه دهد. با این حال، این موضوع از موضوعی به موضوع دیگر متفاوت است. در اینجا چند نمونه آورده شده است.

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

موضوع Twenty Sixteen به شما امکان می دهد یک تصویر پس زمینه به هدر اضافه کنید و حتی تصاویر هدر تصادفی اضافه کنید.

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

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

در این راهنما، اجازه دهید به شما نشان دهیم که چگونه با استفاده از سفارشی‌کننده تم با موضوع Astra.

Astra یک گزینه اختصاصی “Header Builder” در پانل سفارشی سازی خود در سمت چپ دارد. در اینجا، تنظیمات مختلفی را برای ویرایش ظاهر و سبک هدر پیدا خواهید کرد. می‌توانید با افزودن بلوک‌ها، یک سرصفحه سفارشی بسازید، درست مانند هنگام ویرایش یک پست وبلاگ یا صفحه در ویرایشگر محتوای وردپرس.

برای شروع، کافی است ماوس را روی یک ناحیه خالی در سرصفحه قرار دهید و روی نماد «+» کلیک کنید تا یک بلوک هدر اضافه شود.

در مرحله بعد، می‌توانید هر بلوکی را که می‌خواهید به هدر سفارشی خود اضافه کنید، انتخاب کنید. برای مثال، می‌توانید یک بلاک ویجت، بلوک حساب، بلوک جستجو و موارد دیگر.

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

سپس، می‌توانید هر بلوکی را که به هدر اضافه می‌کنید، بیشتر سفارشی کنید.

به عنوان مثال، با انتخاب بلوک عنوان و نشان‌واره سایت، گزینه‌هایی برای آپلود عنوان و آرم سایت، تغییر عرض آرم، نمایش برچسب سایت و موارد دیگر در اختیار شما قرار می‌گیرد.

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

وقتی ویرایش سرصفحه سفارشی تمام شد، به سادگی روی دکمه “انتشار” کلیک کنید.

برای جزئیات بیشتر، راهنمای نهایی ما در مورد نحوه استفاده از سفارشی ساز تم وردپرس.

سفارشی کردن هدر با استفاده از ویرایشگر کامل سایت وردپرس

وردپرس ویرایش کامل سایت را به وردپرس در نسخه 5.9. اگر طرح زمینه شما از ویژگی جدید پشتیبانی می‌کند، جایگزین سفارشی‌کننده تم می‌شود. با این حال، در حال حاضر، تنها چند موضوع وجود دارد که با ویرایشگر کامل سایت کار می کند.

هنگامی که از یک طرح زمینه سازگار استفاده می کنید، می توانید هدر خود را با رفتن به ظاهر » ویرایشگر سفارشی کنید. با این کار ویرایشگر کامل سایت راه اندازی می شود که شبیه به عنوان Block Editor که برای نوشتن پست ها و صفحات وردپرس استفاده می کنید.

وقتی روی سرصفحه کلیک می‌کنید، متوجه می‌شوید که نام الگو در بالای صفحه به «سرصفحه صفحه» تغییر می‌کند.

اکنون، وقتی روی نماد “تنظیمات” در نوار ابزار کلیک می‌کنید، گزینه‌هایی برای سفارشی کردن طرح‌بندی، رنگ، حاشیه و ابعاد سرصفحه مشاهده خواهید کرد.

به عنوان مثال، رنگ پس‌زمینه هدر را تغییر می‌دهیم. ابتدا باید بخش “Color” را گسترش دهید و سپس روی گزینه “Background” کلیک کنید.

در پنجره پاپ آپی که ظاهر می شود، ابتدا یک رنگ ثابت یا گرادیان را انتخاب می کنید. سپس، می توانید از بین تعدادی رنگ از پیش تعیین شده انتخاب کنید. هنگامی که روی یک رنگ کلیک می کنید، پس زمینه هدر شما بلافاصله تغییر می کند.

می‌توانید با کلیک کردن روی نماد «سبک‌ها» در سمت راست بالای صفحه، گزینه‌های سفارشی‌سازی بیشتری پیدا کنید. با این کار می‌توانید فونت، رنگ‌ها و طرح‌بندی هدر را تغییر دهید.

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

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

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

حتی می توانید چندین سبک هدر سفارشی برای صفحات و بخش های مختلف وب سایت خود ایجاد کنید.

توجه: می‌توانید از نسخه رایگان SeedProd برای ایجاد صفحات فرود سفارشی، از جمله هدرهای سفارشی. اما برای ایجاد تم‌های کاملاً سفارشی، که شامل طرح‌بندی‌های سرصفحه در سراسر سایت می‌شود، به نسخه Pro نیاز دارید.

ابتدا، توصیه می‌کنیم راهنمای ما را در چگونه به راحتی یک پوسته وردپرس سفارشی بدون هیچ کدی ایجاد کنیم. پس از انجام این کار، می توانید شروع به سفارشی کردن هدر خود در ویرایشگر SeedProd کنید.

برای دسترسی به ویرایشگر، تنها کاری که باید انجام دهید این است که روی پیوند “ویرایش طراحی” موجود در زیر سربرگ کلیک کنید.

این هدر را در ویرایشگر کشیدن و رها کردن SeedProd باز می‌کند.

از اینجا، می‌توانید به راحتی هدر خود را با افزودن بلوک‌های جدید سفارشی کنید.

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

بهترین بخش این است که می توانید هر بلوک را با استفاده از سازنده تم سفارشی کنید. به عنوان مثال، می توانید اندازه و تراز لوگوی خود را تغییر دهید یا انتخاب کنید کدام صفحات در منوی ناوبری نمایش داده شوند. حتی به شما امکان می‌دهد یک تصویر در سربرگ اضافه کنید.

با SeedProd، می‌توانید یک بخش کامل را نیز به الگوی هدر طرح زمینه خود اضافه کنید.

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

برای استفاده از بخش سرصفحه، باید به برگه «بخش‌ها» در پانل «طراحی» بروید.

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

بروید و سفارشی کردن بخش سرصفحه را شروع کنید.

وقتی از هدر سفارشی خود راضی بودید، مطمئن شوید که برای ذخیره تغییرات خود، روی دکمه “ذخیره” کلیک کرده اید.

اکنون، آماده انتشار هدر سفارشی خود هستید.

به سادگی از داشبورد وردپرس خود به SeedProd » Theme Builder بروید و روی کلید کنار گزینه «فعال کردن تم SeedProd» روی «بله» کلیک کنید.

هنگامی که این گزینه را فعال کردید، SeedProd تم پیش‌فرض وردپرس شما را با یک تم و هدر سفارشی جدید جایگزین می‌کند.

اکنون می توانید از وب سایت خود دیدن کنید تا سربرگ سفارشی جدید را در عمل مشاهده کنید.

برای هر صفحه سرصفحه های سفارشی متفاوتی ایجاد کنید

آیا می دانستید که با استفاده از SeedProd، می توانید هدرهای سفارشی برای صفحات مختلف ایجاد کنید؟

طرح‌ساز به شما امکان می‌دهد هدرهای سفارشی را برای هر صفحه در وردپرس خود اضافه کنید وب سایت. به این ترتیب، می‌توانید یک هدر سفارشی‌شده برای دسته‌ها، برچسب‌ها، انواع پست، انواع صفحه و موارد دیگر نشان دهید.

برای شروع، باید از داشبورد وردپرس خود به SeedProd » Theme Builder بروید و روی دکمه «افزودن قالب تم جدید» کلیک کنید.

یک پنجره بازشو جدید که در آن باید جزئیات الگوی تم را وارد کنید ظاهر می‌شود.

بروید و یک نام برای قالب طرح زمینه خود وارد کنید. پس از آن، به سادگی از منوی کشویی، “Header” را به عنوان نوع الگو انتخاب کنید. می‌توانید فیلد «اولویت» را خالی بگذارید.

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

فراموش نکنید پس از اتمام کار، روی دکمه “ذخیره” کلیک کنید.

پس از آن، پیش بروید و هدر سفارشی را با استفاده از سازنده تم کشیدن و رها کردن SeedProd ویرایش کنید.

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

می‌توانید ایده‌های بیشتری درباره نحوه سفارشی‌سازی هدر خود با استفاده از SeedProd در راهنمای مبتدیان ما در نحوه ایجاد آسان یک تم وردپرس سفارشی با استفاده از تم ساز SeedProd.

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

این را می‌توان با افزودن کد به فایل‌های طرح زمینه خود انجام داد، اما با استفاده از یک تم‌ساز کنترل بیشتری خواهید داشت.

ما قبلاً به شما نشان دادیم که چگونه هدر خود را با استفاده از SeedProd سفارشی کنید. افزونه تم ساز. SeedProd همچنین به شما امکان می دهد چندین هدر سفارشی ایجاد کنید و آنها را برای دسته های مختلف با استفاده از منطق شرطی.

برای ایجاد هدر جدید، باید به SeedProd » Theme Builder بروید و روی دکمه نارنجی «افزودن قالب تم جدید» کلیک کنید. از طرف دیگر، می توانید هدر فعلی خود را کپی کرده و از آن به عنوان نقطه شروع استفاده کنید.

یک پنجره بازشو ظاهر می‌شود که در آن می‌توانید به الگوی تم یک نام بدهید و از منوی کشویی Type، «Header» را انتخاب کنید.

همچنین باید اولویت را وارد کنید. بنابراین اگر بیش از یک هدر شرایط یک صفحه خاص را داشته باشد، هدر با بیشترین اولویت نمایش داده می شود.

سرصفحه پیش‌فرض دارای اولویت 0 است، بنابراین مطمئن شوید که 1 یا بالاتر را وارد کرده‌اید.

پس از آن، باید یک یا چند شرط را تنظیم کنید. این به SeedProd اجازه می دهد تا بداند چه زمانی یک هدر خاص را نمایش دهد. شما به سادگی شرایط را از منوی کشویی.

در دو منوی اول، باید “Include” و سپس “Has Category” را انتخاب کنید >

با کلیک بر روی دکمه “اضافه کردن شرایط” و از جمله دسته دیگر می توانید به راحتی همان هدر را برای چندین دسته نمایش دهید. پس از اتمام ، برای ذخیره هدر جدید ، روی دکمه “ذخیره” کلیک کنید.

اکنون ، می توانید طراحی هر عنوان جدید را با استفاده از ویرایشگر کشش و رها کردن SeedProd تنظیم کنید ، همانطور که قبلاً به شما نشان دادیم.

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

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

ویجت های

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

ما قبلاً ذکر کردیم که اضافه کردن ویجت ها به هدر خود با استفاده از سازنده تم SeedProd . اما اگر می خواهید ویجت را به عنوان یک موضوع وردپرس معمولی اضافه کنید ، چه می کنید؟

برخی از مضامین ، مانند ASTRA موضوع ، به شما اجازه می دهد این کار را با استفاده از سفارشی سازنده تم وردپرس انجام دهید. ASTRA گزینه ای به نام “Beader Builder” را برای سفارشی سازی کامل هدر ، از جمله اضافه کردن ابزارک ها اضافه می کند.

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

در حالی که رویکرد کلی اضافه کردن قطعه های کد به پرونده twares.php است ، رویکرد آسانتر و ایمن تر از wpcode . این افزونه فرایند اضافه کردن قطعه کد بدون شکستن سایت خود .

برای شروع کار ، اطمینان حاصل کنیم که افزونه WPCode Code Code را در وب سایت وردپرس خود فعال و فعال کرده اید. اگر به کمک نیاز دارید ، احساس راحتی کنید که راهنمای ما را در نحوه نصب افزونه وردپرس .

پس از فعال سازی ، می خواهید به قطعه های کد » + اضافه کنید.

اکنون ، اولین کاری که باید انجام دهید ایجاد عنوان قطعه است. به عنوان مثال ، ما نام خود را نامگذاری می کنیم – اضافه کردن ویجت وردپرس به قسمت هدر. “مرحله دوم گسترش کشویی نوع کد و انتخاب” PHP Snippet “است.

پس از انجام ، به سادگی کد زیر را کپی کرده و آن را در بخش “پیش نمایش کد” قرار دهید.

تابع wpb_widgets_init () {
 
    register_sidebar( آرایه(
        'name' => 'منطقه ویجت هدر سفارشی' ،
        'id' => 'Custom-Header-Widget' ،
        'قبل از_ wwidget' => '
 ،
        'after_widget' => '' ،
        'قبل از_تیتل' => '
 ،
        'after_title' => '
' ،
    )))
 
}
add_action ('widgets_init' ، 'wpb_widgets_init') ؛

 این کد یک عنوان جدید یا یک منطقه آماده ویجت را برای موضوع شما ثبت می کند. 
 در اینجا آنچه ممکن است در ویرایشگر WPCode شما به نظر برسد: 
<شکل کلاس = "wp-block-image size-full"> > 
 برای فعال کردن قطعه قطعه ، می توانید ضامن را در کنار دکمه آبی "ذخیره قطعه" به "فعال" تغییر دهید. سپس ، فراموش نکنید که روی دکمه "ذخیره قطعه" کلیک کنید تا تغییرات خود را ذخیره کنید. 
 هنگامی که سوئیچ را جابجا کردید و تغییرات خود را ذخیره کردید ، اینگونه است که ویرایشگر باید نگاه کند: 
<شکل کلاس = "wp-block-image size-full">  > شکل>
 اکنون ، اگر به  ظاهر "ابزارک  بروید ، یک منطقه ویجت جدید با عنوان" منطقه ویجت هدر سفارشی "را مشاهده خواهید کرد. 
 این جایی است که ویجت های خود را اضافه خواهید کرد. اگر به کمک نیاز دارید ، می توانید راهنمای ما را در مورد نحوه افزودن و استفاده از ویجت ها در وردپرس.
<شکل کلاس = "wp-block-image size-full">  
 بسته به موضوع خود ، ممکن است شما نیز نیاز به  اضافه کردن CSS به وردپرس  برای کنترل نحوه نمایش منطقه ویجت. 
 برای دستورالعمل های دقیق ، می توانید راهنمای ما را در مورد  نحوه اضافه کردن ویجت وردپرس به عنوان وب سایت خود . 
Add Random Header Images to Your WordPress Blog
 راه دیگری که می توانید هدر وردپرس خود را جذاب تر کنید ، اضافه کردن تصاویر تصادفی به بخش هدر است. 
 نشان دادن تصاویر به طور تصادفی در حال تغییر ، به جلب توجه بازدید کنندگان و جذاب تر کردن محتوای شما کمک می کند. 
 برای اضافه کردن تصاویر هدر تصادفی به > وردپرس وبلاگ  ، می توانید از موضوع Customizer استفاده کرده و تصاویر را در بخش هدر بارگذاری کنید. این گزینه بسته به موضوع وردپرس مورد استفاده شما ممکن است متفاوت باشد. 
 بعد ، پیش بروید و گزینه "Headers Randomize Aparted" را انتخاب کنید. 
<شکل کلاس = "wp-block-image size-full">  3>
 اگر می خواهید کنترل و انعطاف پذیری بیشتری در نمایش تصاویر تصادفی در بخش هدر داشته باشید ، می توانید از  افزونه وردپرس . 
 برای اطلاعات بیشتر ، به راهنمای ما در  نحوه اضافه کردن تصاویر هدر تصادفی به وبلاگ وردپرس خود . 

 سرانجام ، اگر می خواهید  کد سفارشی را اضافه کنید  به بخش هدر وب سایت خود ، می توانید به راحتی این کار را از داشبورد وردپرس خود انجام دهید. این روش برای کاربران پیشرفته توصیه می شود و ممکن است برای مبتدیان مناسب نباشد زیرا شامل ویرایش کد است و به دانش فنی نیاز دارد. 
 می توانید با مراجعه به  ظاهر »ویرایشگر پرونده موضوع  از پانل مدیر وردپرس ، پرونده های عنوان موضوع خود را پیدا کنید. در پرونده های تم "Style.css" ، می توانید به قسمت هدر سایت بروید و کد را اضافه یا حذف کنید. 
<شکل کلاس = "wp-block-image size-full"> 
  توجه:  ما توصیه نمی کنیم مستقیماً پرونده های موضوع را ویرایش کنید زیرا کوچکترین اشتباه می تواند وب سایت شما را بشکند و طراحی را خراب کند. 
 یک روش آسان تر برای اضافه کردن کد سفارشی برای ویرایش عنوان سایت شما با استفاده از  wpcode . 
 ابتدا ،  رایگان را نصب و فعال کنید. افزونه WPCode . برای جزئیات بیشتر، لطفاً راهنمای ما را در نحوه نصب افزونه WordPress.
 پس از فعال سازی ، می توانید به قطعه های کد Kode »هدر و پاورقی  از داشبورد وردپرس خود بروید. در مرحله بعد ، به سادگی کد سفارشی را در بخش "هدر" وارد کنید. 

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