از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش ویرایش هدر وردپرس با استفاده از ویرایشگر سایت و سفارشی ساز + نکات مفید
سرفصلهای مطلب
هدرهای وردپرس در ایجاد اولین برداشت بسیار مهم هستند روی بازدید کنندگان. بنابراین، دانستن روش ویرایش هدر وردپرس میتواند هویت برند را بهبود بخشد، ناوبری را بهینه کند یا ظاهر و احساس سایت شما را تازه کند.
خوشبختانه وردپرس به کاربران این امکان را میدهد تا سرصفحههای سایت خود را به راحتی از روی آن ویرایش کنند سفارشی ساز و ویرایشگر سایت. از آنجایی که هر دو گزینه سریع و مبتدی هستند، باید براساس آن انتخاب کنید روی تم و ترجیحات وردپرس شما.
در این آموزش وردپرس، روش ویرایش هدر وب سایت خود را با استفاده از آن پوشش خواهیم داد سفارشی ساز و ویرایشگر سایت. همچنین، نکاتی را برای ایجاد یک هدر وب سایت موثر در وردپرس به اشتراک می گذاریم.
روش ویرایش هدر وردپرس
مراحل سفارشی سازی هدر شما در وردپرس بستگی دارد روی موضوع و نسخه اصلی نرم افزاری که استفاده می کنید. آنها بر ویژگی ها و ابزارهای موجود برای ایجاد هدر سفارشی تأثیر می گذارند.
با این حال، دو روش متداول برای ایجاد هدرهای سفارشی با استفاده از ویرایشگر سایت و سفارشی ساز. برای این آموزش از آخرین نسخه وردپرس 6.4 استفاده خواهیم کرد.
روش ویرایش هدر در وردپرس با استفاده از ویرایشگر سایت
ویرایشگر پیش فرض وردپرس با گوتنبرگ از نسخه 5.0 و بالاتر یکپارچه شده است. از بلوک ها برای اضافه کردن عناصر وب سایت مانند سرفصل ها، پاراگراف ها، لیست ها و تصاویر استفاده می کند.
توجه داشته باشید که همه تم ها با ویرایشگر گوتنبرگ سازگار نیستند، زیرا فقط می تواند با یک تم بلوک کار کند.
مهم! اگر شما را نمی بینید ویرایشگر منو روی در داشبورد، تم وردپرس انتخابی شما از ویرایشگر کامل سایت پشتیبانی نمی کند. استفاده کنید سفارشی ساز بجای.
در اینجا روش سفارشی کردن هدر خود با ویرایشگر سایت آورده شده است:
- هدایت به ظاهر → ویرایشگر روی داشبورد وردپرس شما
- هنگامی که ویرایشگر سایت راه اندازی شد، را انتخاب کنید الگوها روی منوی نوار کناری سمت چپ
- به پایین اسکرول کنید قطعات قالب بخش، انتخاب کنید سرتیتر. تعداد قطعات قالب هدر بستگی دارد روی تم بلوک انتخابی شما
- هدری را که می خواهید سفارشی کنید انتخاب کنید، سپس روی آن کلیک کنید ویرایش کنید دکمه برای باز کردن حالت ویرایش کامل سایت هدر.
- در رابط ویرایشگر هدر، بلوکهای جدیدی را به قسمت قالب سرصفحه اضافه کنید، جایگزین کنید.
هر تم سازگار با گوتنبرگ از عناصر پیشفرض مختلفی استفاده میکند روی قسمت های قالب هدر کلیک کنید بر روی نمایش لیست دکمه برای دیدن همه بلوک ها روی اونی که شما در حال ویرایشش هستید
در این مثال از بیست و بیست و چهار تم بلوک، که از گروهی از بلوک ها استفاده می کند روی هدر پیش فرض اگر قسمت قالب انتخابی شما نیز از آن استفاده می کند، با کلیک بر روی فلش، تمام بلوک های گروه بندی شده نشان داده می شود.
اگر می خواهید سرصفحه را به طور کامل ویرایش کنید، می توانید آن را با انتخاب پاک کنید گروه از لیست و کلیک کردن بر روی گزینه هایی برای گروه دکمه. انتخاب کنید حذف پس از آن
استفاده کنید درج بلوک برای افزودن عناصر جدید مانند برچسب سایت یا نوار جستجو به هدر. با نگه داشتن ماوس روی قسمت قالب سرصفحه یا در نوار ابزار بالای ویرایشگر سایت، دکمه علامت مثبت را پیدا کنید.
سپس، هر بلوک موجود را برای اضافه کردن به هدر خود جستجو کنید. سپس عناصر اضافه شده جدید را به موقعیتی که می خواهید بکشید و رها کنید. شما همچنین می توانید این کار را از طریق نمایش لیست پانل در حالی که پیش نمایش تغییرات به طور مستقیم روی سمت راست صفحه نمایش
از آنجا که بیست و بیست و چهار موضوع از قبل دارای عناصر هدر ضروری است، ما آنها را همانطور که هستند نگه می داریم. در مراحل زیر، عنوان وب سایت، لوگو و منوی پیمایش را در ویرایشگر کامل سایت شخصی سازی می کنیم.
تغییر عنوان سایت
عنوان سایت پیش فرض را تغییر دهید روی حالت ویرایش کامل سایت قالب هدر با انتخاب گزینه عنوان سایت مسدود کردن.
یا تغییر آن از طریق تنظیمات منو روی داشبورد وردپرس شما نیز به طور خودکار بلوک هدر را تنظیم می کند.
اضافه کردن لوگوی سایت
راه های مختلفی برای تغییر لوگو در وردپرس وجود دارد، از جمله استفاده از ویرایشگر سایت. از آنجایی که این تم به صورت پیشفرض یک لوگو را نمایش میدهد، به سادگی با انتخاب نشاندهنده مکان، آن را جایگزین کنید لوگوی سایت مسدود کردن روی هدر
کلیک کنید بر روی اضافه کردن لوگوی سایت دکمه در مرکز بلوک.
سپس، یک پنجره بازشو به کتابخانه رسانه ظاهر می شود. فایل تصویر جدید را آپلود کنید و فراموش نکنید که قبل از کلیک کردن، متن جایگزین را اضافه کنید انتخاب کنید.
لوگوی سایت را خواهید دید روی هدر سفارشی شما اندازه آن را با کشیدن نقاط انتخاب به داخل و خارج تا زمانی که مناسب تشخیص دهید تغییر دهید. اگر می خواهید لوگوی خود را تغییر دهید، از کلیدهای جهت در نوار ابزار ویرایشگر بلوک استفاده کنید.
اضافه کردن منوی ناوبری
قالب وردپرس انتخابی شما ممکن است یک منوی ناوبری تعیین شده را نمایش دهد روی ناحیه هدر به عنوان مثال بیست و بیست و چهار تم از بلوک ناوبری، که به شما امکان می دهد ساختار و طراحی منو را مستقیماً ویرایش کنید.
انتخاب کنید جهت یابی مسدود کردن روی هدر را برای ویرایش ورودی منو و کلیک کنید بلوک را اضافه کنید دکمه.
انجام این کار به طور خودکار یک مکان نگهدار پیوند ایجاد می کند که می توانید با هر کدام متصل شوید page روی سایت شما.
برای ویرایش آسانتر منوی پیمایش، بلوک را انتخاب کرده و روی آن کلیک کنید تنظیمات دکمه برای راه اندازی پانل پیکربندی.
در آنجا میتوانید تنظیمات پیوند را تغییر دهید که شامل ویرایش برچسب، URL، ویژگی و طراحی میشود. اگر یک CSS سفارشی برای استایل منو دارید، می توانید آن را نیز اضافه کنید.
اگر می خواهید یک منوی کشویی ایجاد کنید، به منوی مورد نظر بروید لینک سفارشی گزینه ها، سپس انتخاب کنید پیوند منوی فرعی را اضافه کنید. از طرف دیگر، a را اضافه کنید منوی فرعی از درج کننده بلوک
پس از انجام تغییرات، ضربه زدن را فراموش نکنید صرفه جویی قبل از بستن ویرایشگر هدر
مطالعه پیشنهادی
اگر روش دیگری را برای سفارشی کردن منوی ناوبری خود ترجیح می دهید، آموزش ما را بررسی کنید روی چگونه a را اضافه کنیم page به منوی ناوبری در وردپرس.
روش ویرایش هدر وردپرس با استفاده از Customizer
اگر از نسخه قدیمی وردپرس یا یک تم کلاسیک استفاده می کنید، استفاده کنید سفارشی ساز برای تغییر قالب هدر بسته به روی موضوعی که فعال می کنید، مراحل دسترسی به وردپرس سفارشی ساز ممکن است متفاوت باشد.
به عنوان مثال، پیش فرض بیست و بیست و یک تم و قدیمی تر فقط این را دارند هویت سایت گزینه ای برای سفارشی کردن لوگو و عنوان سایت روی هدر
از سوی دیگر، محبوب ترین تم های شخص ثالث مانند آسترا و Neve گزینههای هدر اختصاصی دارید که به شما امکان میدهد در صورت ارتقاء به طرح برتر، عناصر بیشتری مانند نمادهای اجتماعی را تغییر دهید.
برای این آموزش، ما از آسترا موضوع. با این حال، مراحل دسترسی به وردپرس سفارشی ساز یکسان هستند – به آن بروید ظاهر → شخصی سازی.
سفارشی ساز تم Astra دارای یک تم ساز با کشیدن و رها کردن با رابط کاربر پسند است. در پانل سمت چپ، می توانید عناصر وب سایت را برای ویرایش انتخاب کنید. در همین حال، می توانید پیش نمایش تغییرات را مشاهده کنید روی سمت راست صفحه نمایش
برای شروع ویرایش هدر وب سایت خود، را انتخاب کنید هدر بیلدر از لیست
الگوهای هدر را برای ویرایش خواهید دید روی پانل سمت چپ و سازنده هدر روی سمت راست پایین صفحه نمایش
سه ردیف سرصفحه به طور پیش فرض در دسترس است. میتوانید با نگهداشتن نشانگر روی فضای خالی و کلیک کردن روی دکمه پلاس که ظاهر میشود، یک عنصر هدر جدید اضافه کنید.
همچنین می توانید عناصر هدر موجود را با کشیدن و رها کردن آنها به موقعیت دلخواه خود منتقل کنید. هنگامی که همه چیز را همانطور که می خواهید قرار دادید، شروع به شخصی سازی آنها کنید.
تغییر عنوان و لوگوی سایت
برای باز کردن عمومی برگه تنظیمات را کلیک کنید عنوان و لوگوی سایت منو از پانل پیکربندی هدر.
را فشار دهید تغییر لوگو دکمه ای برای نمایش کتابخانه رسانه وردپرس و آپلود لوگوی سایت شما. سپس، پهنای تصویر هدر را به دلخواه تنظیم کنید.
همچنین اگر نمیخواهید لوگویی اضافه کنید، میتوانید مکاننمای تصویر را حذف کنید روی هدر شما
نکته حرفه ای
تم Astra به شما امکان می دهد یک لوگوی متفاوت برای نمایش آپلود کنید روی یک صفحه نمایش شبکیه چشم اغلب برای دستگاه های پیشرفته مانند محصولات اپل استفاده می شود. برای استفاده از این ویژگی، باید یک فایل لوگو با وضوح دو برابر بزرگتر از نسخه اصلی ارائه دهید.
همانطور که پانل را به پایین اسکرول می کنید، می بینید عنوان سایت پیکربندی کلی در آنجا می توانید متن را ویرایش کنید، دید آن را مدیریت کنید روی دستگاه های مختلف، یک برچسب اضافه کنید، و نمایش هر دو عنصر را انتخاب کنید روی هدر یا پنهان کردن آنها
در پایین پنل پیکربندی، می توانید نماد سایت را ویرایش کنید. بازدیدکنندگان این تصویر را خواهند دید روی مرورگرهای آنها هنگام پیمایش وب سایت شما.
میتوانید با جابجایی به آن، روش ظاهر عنوان، لوگو و برچسب سایت را پیکربندی کنید طرح تب در پنل پیکربندی
اضافه کردن منوی ناوبری
برای تغییر منوی پیمایش روی هدر جدید خود را کلیک کنید منوی اصلی گزینه ای از پنل پیکربندی در مورد عنوان و لوگوی سایت، می توانید آن را سفارشی کنید عمومی و طرح تنظیمات منو
اگر می خواهید ورودی های منو را تغییر دهید روی هدر، کلیک کنید منو را از اینجا پیکربندی کنید برای باز کردن منوها تنظیمات به طور مستقیم روی پانل به این ترتیب، می توانید در حین پیش نمایش تغییرات، منو را تغییر دهید روی سایت زنده به طور همزمان
از طرف دیگر، پیکربندی شما از طریق ظاهر → منوها همچنین به طور خودکار با هدر موضوع تنظیم می شود.
حتما بزن انتشار قبل از خروج از تم ساز به طوری که تمام تغییرات در هدر اعمال شود.
نکته حرفه ای
پیکربندی پیشفرض منوی پیمایش هر تم کلاسیک ممکن است متفاوت باشد. در صورت نیاز، مستندات موضوع انتخابی خود را بخوانید تا روش سفارشیسازی منوی پیمایش آن را بیابید.
چرا هدر وردپرس مهم است
از آنجایی که هدر یک وب سایت وردپرس در بالا قرار دارد، نقش اصلی را در تنظیم لحن برای تجربه کاربر ایفا می کند.
یعنی یک هدر وردپرس سفارشی می تواند مزایای زیر را برای وب سایت شما به ارمغان بیاورد:
- مرکز ناوبری. قسمت هدر اغلب منوی ناوبری را در خود جای می دهد و بازدیدکنندگان را راهنمایی می کند تا آنچه را که به دنبال آن هستند به طور موثر پیدا کنند.
- ویترین برندینگ. خواه لوگو، برچسب یا طرح رنگ شما باشد، هدر جایی است که هویت برند شما در مرکز توجه قرار می گیرد.
- جاذبه زیبایی شناسی. فراتر از عملکرد، هدرهای سفارشی به جذابیت بصری سایت شما کمک می کنند. یک هدر خوب طراحی شده، تعامل کاربر را افزایش می دهد و وب سایت شما را حرفه ای تر می کند.
به عبارت ساده، هدر وردپرس شما بر تجربه کاربری سایت شما (UX) تأثیر می گذارد، زیرا بر روش حرکت افراد در وب سایت شما تأثیر می گذارد. علاوه بر این، با ارائه اطلاعات نمایه سازی لازم برای خزنده های ربات، بر بهینه سازی موتور جستجو (SEO) شما تأثیر می گذارد.
نکاتی برای هدر وردپرس موثر
با نکات زیر میتوانید هدر وردپرس خود را کاربردی و از نظر بصری جذاب نگه دارید:
آن را سازگار کنید
هدر شما نقش مهمی در کمک به افراد در جهت یابی وب سایت شما ایفا می کند. به همین دلیل است که اطمینان از هماهنگی ظاهر آن با بهترین شیوه های طراحی وب سایت.
این که آیا بازدیدکنندگان به سمت شما حرکت می کنند homepage، پست وبلاگ یا محصول page، حفظ یک هدر ثابت در سراسر الگوها یک تجربه کاربری یکپارچه را فراهم می کند. یکنواخت نگه داشتن آن به مردم کمک می کند تا وب سایت شما را بیشتر بشناسند و به آن اعتماد کنند.
علاوه بر این، به یاد داشته باشید که اگر محتوای جدید وب سایت شما بر عنصر آن تأثیر می گذارد، هدر را ویرایش کنید. به عنوان مثال، اگر شما یک جدید ایجاد کنید page، ویرایش منوی ناوبری را فراموش نکنید.
برخی از تم های وردپرس به طور خودکار بخش هدر را پس از هر به روز رسانی تنظیم می کنند روی وبسایت شما. در حالی که برخی دیگر این کار را نمی کنند، مهم است که بعد از آن اصلاح سرصفحه را دوباره بررسی کنید.
ناحیه هدر را ساده نگه دارید
در حالی که بخش هدر یک جنبه ضروری از وب سایت شما است، شلوغی بیش از حد آن می تواند معکوس باشد. بنابراین، یکی از بهترین روشهای طراحی هدر، حفظ حداقلی بودن آن است.
ساده کردن ناحیه هدر کاربرپسندی سایت شما را تضمین می کند. به این ترتیب، تمرکز بازدیدکنندگان آسان تر خواهد بود روی عناصر محوری – مانند لوگوی سایت، عنوان، برچسب و منوهای پیمایش.
هنگامی که فکر می کنید یک عنصر وب سایت فضای بسیار زیادی را اشغال می کند، آن را قرار دهید روی یک منطقه وب سایت دیگر به عنوان مثال، افزودن یک بلوک جستجوی حجیم به عنوان با یک منوی ناوبری بزرگ ایده آل نیست.
از تصاویر با کیفیت بالا استفاده کنید
ما نمایش یک لوگو را توصیه می کنیم روی بخش تصویر هدر وردپرس شما. این به عنوان یک لنگر بصری برای تقویت شناخت برند شما عمل خواهد کرد.
برای اطمینان از ظاهر حرفه ای، تصاویر با وضوح بالا را انتخاب کنید، زیرا یک لوگوی تار می تواند جذابیت بصری کلی سایت شما را کاهش دهد. از فایل های تصویری با کیفیت بالا استفاده کنید تا اولین تاثیر به یاد ماندنی را به جا بگذارید روی بازدید کننده ها.
طراحی حرفه ای لوگو یا استفاده از ابزار سازنده آرم هوش مصنوعی می تواند به شما در این امر کمک کند.
با پاسخگویی موبایل مراقب باشید
تقریبا 60 درصد از جستجوهای اینترنتی با استفاده از دستگاه تلفن همراه انجام می شود. در حالت ایده آل، کاربران تلفن همراه نباید مجبور باشند صفحه نمایش خود را برای جست و جوی وب سایت بزرگنمایی کنند. بنابراین، نسخه موبایل وب سایت شما باید به راحتی قابل خواندن و پیمایش باشد.
یک هدر پاسخگوی تلفن همراه، یک تجربه یکپارچه را در اندازه های مختلف صفحه نمایش ارائه می دهد. حفظ یک وب سایت سازگار با موبایل نیز یکی از عوامل بهبود سئو است.
مطمئن شوید که تم های وردپرس واکنش گرا یا page سازندگان برای ساخت وب سایت شما به این ترتیب، حفظ پاسخگویی هدر سفارشی شما می تواند ساده تر باشد.
اگر می خواهید پاسخگویی وب سایت خود را بررسی کنید، از ابزارهایی مانند تست سازگاری با موبایل کنسول جستجوی گوگل.
نتیجه
یادگیری روش تغییر هدر در وردپرس به بهبود ظاهر و عملکرد وب سایت کمک می کند. خوشبختانه، اصلاح آن با ویرایشگر سایت و سفارشی ساز فقط به چندین مرحله آسان نیاز دارد.
گذشته از پوشش مراحل ویرایش هدر با هر دو ابزار، ما همچنین توضیح داده ایم که چگونه هدر وردپرس خود را موثر نگه دارید. در اینجا یک خلاصه کوچک وجود دارد:
- هدر سایت خود را ثابت نگه دارید تا یک وب سایت حرفه ای داشته باشید.
- یک ناحیه هدر تمیز ایجاد کنید که فوکوس کند روی عناصر محوری – مانند لوگوی سایت، عنوان، برچسب و منوهای پیمایش.
- برای ارتقای برند سایت خود، تصاویر هدر با کیفیت بالا آپلود کنید.
- از یک پوسته وردپرس پاسخگو برای موبایل برای هدر خود استفاده کنید تا با اندازه های مختلف صفحه مطابقت داشته باشد.
در نهایت، از خدمات میزبانی قابل اعتماد وردپرس استفاده کنید تا مطمئن شوید که وب سایت شما همیشه در دسترس است و به سرعت بارگذاری می شود.
آموزش های بیشتر وردپرس را بیابید
چگونه یک وب سایت وردپرس راه اندازی کنیم
روش ایجاد جداول در وردپرس
روش استفاده از ویرایشگر فایل تم وردپرس
روش اضافه کردن فهرست مطالب وردپرس
روش ویرایش سوالات متداول هدر وردپرس
سوالات متداول را بخوانید تا درباره سفارشی سازی هدر وردپرس بیشتر بدانید.
آیا می توانم یک سربرگ وردپرس را بدون مهارت برنامه نویسی ویرایش کنم؟
کاملا. ویرایش هدر سایت با استفاده از وردپرس ویرایشگر سایت و سفارشی ساز به مهارت کدنویسی نیاز ندارد حتی اگر می خواهید یک کد CSS سفارشی برای تغییر سبک هدر اضافه کنید، می توانید به راحتی با استفاده از آن این کار را انجام دهید ویرایشگر فایل تم یا یک افزونه
آیا می توانم فایل header.php وردپرس را مستقیماً ویرایش کنم؟
آره، header.php جزو فایل های تم قابل ویرایش در وردپرس است، اما حتما از قبل یک نسخه پشتیبان تهیه کنید. تمام تغییراتی که انجام می دهید مستقیماً بر ظاهر و عملکرد سایت شما تأثیر می گذارد. بنابراین، هنگام ویرایش فایل هدر بسیار محتاط باشید و از تم فرزند وردپرس استفاده کنید.
آیا افزونه ای برای ویرایش هدر در وردپرس وجود دارد؟
بله، شما می توانید یک هدر وردپرس سفارشی با یک افزونه ایجاد کنید. چند مورد محبوب هستند WPCode، Ultimate Header Builder، و مدیر کد پاورقی سرصفحه – برای کسانی که می خواهند ویژگی های پیشرفته ای را برای ویرایش کد سفارشی هدر برای Google Analytics یا Facebook Pixel داشته باشند.
لطفا در صورت وجود مشکل در متن یا مفهوم نبودن توضیحات، از طریق دکمه گزارش نوشتار یا درج نظر روی این مطلب ما را از جزییات مشکل مشاهده شده مطلع کنید تا به آن رسیدگی کنیم
زمان انتشار: 1402-12-28 22:44:05