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

تاثیر اولیه یا برداشت اولیه (first impression) بسیار مهم است. وقتی بازدیدکنندگان به وب‌سایت می‌رسند، برداشت اولیه از بالای صفحه و هدر (سربرگ) شروع می‌شود. توسعه دهندگان قالب‌های وردپرس نیازی به اضافه کردن تمپلیت هدر سایت وردپرس ندارند، اما به ندرت پیش می‌آید که سایتی چنین قالبی نداشته باشد. از زمان پیدایش وب، هدر (سربرگ) اصطلاحی است که برای بلوکی از عناصر ضروری HTML که بازدیدکنندگان انتظار دارند در بالای صفحات پیدا کنند، محصور شده است.

که اغلب شامل موارد زیر است:

• برندینگ: می‌تواند شامل نام سایت و اغلب یک لوگو باشد. استفاده از رنگ، تصاویر یا ویدیو در هدر ممکن است این برند را تقویت کند.
• فهرست اولیه: اگر وب سایت بیش از یک صفحه دارد، بازدیدکنندگان احتمالا به دنبال یک فهرست سایت در نزدیکی بالای هر صفحه خواهند بود.
• فهرست ثانویه: فهرست ثانویه می‌تواند هر لینک مستقل از مکان فعلی کاربر در سلسله مراتب منوی اصلی باشد. به دکمه ورود و نمادهایی فکر کنید که به رسانه‌های اجتماعی یا یک سبد خرید لینک دارند.
• جستجو: اگر وب‌سایت از جستجو پشتیبانی می‌کند، لازم نیست کادر ورودی جستجو در هدر باشد، اما بازدیدکنندگان حتما آن را در پاورقی (فوتر) جستجو نمی‌کنند.

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

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

مقایسه پوسته بلوک با پوسته کلاسیک

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

• با استفاده از ویرایشگر سایت: وردپرس ۵.۰ یک ویرایشگر بلوکی برای محتوای وب‌سایت معرفی کرد که به نام گوتنبرگ شناخته می‌شود. با انتشار وردپرس ۵.۹، مفهوم بلوک به قالب بندی گسترش یافت و به گزینه‌ای قوی برای ویرایش کامل سایت تبدیل شد. ویرایشگر سایت و توانایی ساخت بخش‌های مختلف تم وب‌سایت با مولفه‌های مبتنی بر HTML، انعطاف‌پذیری بی‌سابقه‌ای را برای سفارشی‌سازی بومی وردپرس به ارمغان آورد.
• استفاده از سفارشی‌ساز وردپرس: ما سعی نمی‌کنیم که شما احساس پیری کنید، اما تم‌هایی که فقط با استفاده از سفارشی‌ساز یک بار پیشگامانه و ابزارک‌های مرتبط قابل تغییر هستند، تم‌های کلاسیک نامیده می‌شوند. علی‌رغم نامی که صدایی قدیمی دارد، تم‌های جدید به سبک کلاسیک همچنان منتشر می‌شوند و به هزاران قالب موجود در بازار اضافه می‌شوند. در مقایسه با تم‌های ویرایشگر سایت و بلوک، تم‌های Customizer و Classic گزینه‌های کمتری برای سفارشی سازی هدر ارائه می‌دهند.
• ویرایش فایل‌های تم به‌طور مستقیم: برای ویرایش کد در فایل‌های تم کلاسیک وردپرس به دانش اولیه PHP نیاز دارید، اما زمانی که Customizer نمی‌تواند آنچه را که برای هدر سایت وردپرس نیاز دارید ارائه دهد، این یک راه‌حل است.
  چیزی که در اینجا به آن نمی‌پردازیم، سفارشی سازی هدر سایت وردپرس در سازندگان صفحه وردپرس شخص ثالث مانند Divi یا هر تعداد افزونه ای است که به طور خاص برای مقابله با هدرهای وب‌سایت (و فوتر) طراحی شده اند. اگر تنها گزینه شما نیاز به ویرایش مستقیم فایل های تم دارد و می خواهید از برنامه نویسی PHP اجتناب کنید، این افزونه ها می توانند ارزش کاوش را داشته باشند.

نحوه ویرایش هدر تم بلوک

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

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

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

سربرگ تم بلوکی

بررسی HTML بک‌اند قالب مانند یک هدر سایت وردپرس به توضیح آنچه که هنگام سفارشی کردن یک موضوع اتفاق می افتد کمک می‌کند.

ما از تم Seedlet برای این آموزش استفاده می‌کنیم زیرا به عنوان Seedlet (Blocks) و Seedlet قدیمی (Classic) در دسترس است. Seedlet (Blocks) از تم Blockbase به عنوان والد خود استفاده می‌کند، و این کل محتوای فایل header.html در فهرست‌های موضوع Seedlet است:

بیشتر جادوهای پشت بلوک‌های وردپرس در کامنت HTML اتفاق می‌افتد. کامنت می‌توانند اطلاعات استایل و سایر دستورالعمل‌ها را در طول ساخت صفحه ارسال کنند. HTML بالا مقداری فاصله عمودی به هدر سایت وردپرس پیش‌فرض اضافه می‌کند، اما اقدام اصلی درخواست گنجاندن الگویی در موضوع Blockbase است که (پس از اضافه شدن html) در فایل header-centered.html یافت می‌شود.

دایرکتوری قسمت‌های قالب در تم Blockbase شامل این فایل‌های مربوط به یک هدر سایت وردپرس است:

header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.html

به عنوان مثال، فایل header-rounded-logo.html شامل یک نظر HTML است که یک کلاس CSS برای برش دایره ای تصویر لوگو اضافه می‌کند. اگر ما مشتاق این رویکرد بودیم، می‌توانیم فایل Seedlet header.html خود را ویرایش کنیم تا به جای header-centered.html شامل header-rounded-logo.html باشد. اما ما مجبور نیستیم این کار را انجام دهیم زیرا می‌توانیم آن قسمت قالب را در ویرایشگر سایت وردپرس اعمال کنیم و فایل‌های تم را روی هارد دیسک دست نخورده بگذاریم.

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

با یک تم بلوک فعال در وب‌سایت، می‌توانیم با انتخاب نمایش > ویرایشگر به ویرایشگر سایت در پیشخوان وردپرس دسترسی پیدا کنیم:

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

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

این عناصر هویت سایت قبلا در هدر سایت وردپرس ظاهر می‌شوند زیرا قسمت قالب header-centered.html ذکر شده در بالا شامل این کامنت است:

پیمایش اصلی توسط این نظر ایجاد می‌شود:

بیایید لوگوی خود را اضافه کنیم:

۱. مکان‌نمای لوگو را انتخاب کنید.
2. روی دکمه افزودن رسانه کلیک کنید.
3. لوگوی خود را در کتابخانه رسانه وردپرس انتخاب کنید یا آن را از دیسک آپلود کنید.

سفارشی‌سازی هدر سایت وردپرس با افزودن لوگو آنقدر کار رایجی است که حتی اکثر تم‌های کلاسیک وردپرس کار را در Customizer ساده می‌کنند. بنابراین، اجازه دهید بلوکی را اضافه کنیم که قبلا در قالب پیش بینی نشده است: یک منوی ثانویه در نزدیکی بالای صفحه با ورودی: فروشگاه

 

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

با خرید هاست وردپرس کانفیگ حرفه‌ای و نظارت بر سرور به صورت پیوسته توسط تیم فنی پارسدِو انجام خواهد شد.

 

با فعال کردن Block Inserter:

۱. بلوک ناوبری را پیدا کنید (می‌توانید آن را جستجو کنید).
2. بلوک را به حاشیه بالای هدر بکشید.

اکنون، ما بلوک ناوبری را با ایجاد یک پیوند سفارشی (جدا شده از پیمایش اصلی) ویرایش می کنیم که متن فروشگاه را نمایش می دهد و URL زیر دامنه تجارت الکترونیک ما را دارد:

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

۱. روی بلوک ناوبری جدید کلیک کنید.
2. روی نماد Change items justification در نوار ابزار کلیک کنید.
3. درست Justify items را انتخاب کنید.

در اینجا هدر تکمیل شده است:

نحوه تغییر هدر تم کلاسیک با Customizer

هنگامی که اولین نسخه تم Customizer در سال ۲۰۱۲ همراه با وردپرس ۳.۴ منتشر شد، این یک جهش به جلو در کمک به مدیران برای تغییر ظاهر و احساس وب سایت خود بدون کدنویسی بود.

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

با استفاده از Customizer تم وردپرس

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

از منوی اصلی Customizer، Site Identity را انتخاب می کنیم تا به اجزای قابل تنظیم در هدر برسیم:

در قسمت Site Identity این موضوع، می‌توانیم یک لوگو اضافه یا تغییر دهیم و عنوان سایت و هر برچسبی را ویرایش کنیم. (عنوان و برچسب سایت در ابتدا با ورودی های صفحه تنظیمات عمومی پنل مدیریت پر می‌شوند.)

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

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

در زیر، با یک آرم در جای خود، Customizer به ما اجازه می دهد تصویر را حذف کنیم یا آن را با یک لوگوی متفاوت جایگزین کنیم:

Customizer چه چیزی را می‌تواند سفارشی کند؟

بنابراین، چگونه Customizer تعیین می‌کند که آیا می‌توانیم یک لوگو را آپلود کنیم و در کجا قرار گیرد؟

با این ورودی در اسکریپت functions.php  پوسته شروع می‌شود:

آن بلوک کد دکمه Select Logo را در تب Customizer’s Site Identity همراه با پیوند آن به عملکردهای Media Library فعال می‌کند.

سپس، در کد PHP مورد استفاده برای ساخت هدر سایت، این قطعه کد کوتاه در محلی که لوگو باید ظاهر شود اضافه می‌شود:

با ویرایش فایل‌های تم، هدر وردپرس را تغییر دهید

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

ما می‌توانیم به سادگی فایل تم مناسب را باز کنیم و HTML را به صورت دستی برای منوی ثانویه خود اضافه کنیم، اما این امر کوته‌نگری خواهد بود. بعداً، ممکن است بخواهیم متن پیوند خرید خود را به روز کنیم (اکنون خرید کنید؟)، URL آن را تغییر دهیم یا مورد دیگری را به آن منو اضافه کنیم (ورود به سیستم؟).

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

قبل از شروع: بکاپ گیری

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

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

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

ویرایش هدر وردپرس در قالب کلاسیک

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

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

اگر نگاهی به اسکریپت functions.php پوسته بیندازیم، می‌بینیم که آن مکان های منو برای اولین بار به کجا ارجاع داده شده‌اند:

در زیر، ما به آن بلوک اضافه می‌کنیم تا یک ورودی برای منوی جدید ناوبری ثانویه خود ثبت کنیم:

وقتی به Customizer برمی گردیم، گزینه Secondary Navigation جدید در قسمت Menu Locations ظاهر می‌شود

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

در فایل تم برای هدر، کدی را اضافه کردیم که تایید می‌کند منوی پیمایش ثانویه وجود دارد و حداقل یک ورودی در لیست لینک‌ها دارد. سپس محتویات منو را تجزیه می‌کنیم و نمایش می‌دهیم:

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

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

جمع بندی

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

Customizer که بیش از یک دهه از آن برای مدیریت تم‌های کلاسیک استفاده کرده‌ایم، تغییراتی را در عناصری که توسعه‌دهنده طرح زمینه شناسایی و به‌عنوان قابل تنظیم ثبت کرده است، امکان‌پذیر می‌کند. تغییراتی که می‌خواهید انجام دهید و خارج از آن محدوده هستند ممکن است نیاز به ویرایش فایل‌های تم و  درک اولیه زبان برنامه‌نویسی PHP داشته باشند.