همانطور که از نام آن پیداست، یک نوار کناری در یک وب سایت، ستون عمودی است که می تواند در دو طرف محتوای اصلی یا پست وبلاگ در یک صفحه وب قرار گیرد. در حالی که پستهای وبلاگ محتوای اصلی را در اختیار خوانندگان قرار می‌دهند، یک نوار کناری می‌تواند به شما در بهبود تعامل خواننده کمک کند.
یک نوار کناری لزوما باید در سمت چپ یا راست محتوای اصلی نمایش داده شود. همچنین می توان آن را در فوتر نیز قرار داد. در زمینه وردپرس، نوار کناری به سادگی به معنای بخشی از وب سایت شما است که حاوی تعدادی ابزارک است.
اکثر وب سایت ها معمولاً دارای نوار کناری یکسانی هستند که در تمام پست های وبلاگ خود فعال هستند. با این حال، وجود چندین نوار کناری برای نمایش در چندین نوع محتوا نیز امکان پذیر است.
در این آموزش، من به شما نشان خواهم داد که چگونه یک نوار کناری به وب سایت خود در وردپرس اضافه کنید و مراحل آسان را دنبال کنید.
برنامه ریزی محتوا برای قرار دادن در نوار کناری
قبل از اینکه یک نوار کناری به وب سایت خود اضافه کنیم، مهم است که برنامه ریزی کنیم که چه نوع محتوایی را می خواهیم در آنجا قرار دهیم. نوع محتوایی که در نوار کناری قرار می دهید به هدف نهایی شما بستگی دارد. در اینجا فهرستی از تکه‌های محتوای رایج وجود دارد که می‌توانید در نوار کناری قرار دهید.
- نوار جستجو – افزودن نوار جستجو به هر وبلاگ یا وب سایت به خوانندگان کمک می کند تا محتوایی را که می خواهند بخوانند بسیار راحت تر بیابند. همچنین اگر جستجوهای کاربر را ثبت می کنید، می تواند بینش مهمی در مورد رفتار کاربر به شما بدهد.
- پست های اخیر وبلاگ – افزودن لیستی از پستهای وبلاگ اخیر به نوار کناری وب‌سایت شما می‌تواند باعث افزایش ترافیک به آخرین مقالات شما شود.
- پست های وبلاگ مرتبط – نمایش فهرستی از پستهای وبلاگ مرتبط در نوار کناری وب‌سایت می‌تواند ارزش بیشتری را برای خوانندگانی که ممکن است بخواهند بیشتر در مورد محتوایی که می‌خوانند کاوش کنند و اطلاعات بیشتری کسب کنند، فراهم کند.
- محبوب ترین پست ها – به طور مشابه، نمایش لیستی از محبوب ترین پست های شما در نوار کناری می تواند توجه بیشتری به محتوای محبوب شما داشته باشد. این محتوا قبلاً برای خوانندگان مفید بوده است. بنابراین، بینندگان ممکن است از پیوندها قدردانی کنند.
- آخرین نظرات – اگر کاربران مشاهده کنند که افراد دیگری روی پستی نظر ارسال می کنند، احتمال بیشتری وجود دارد که با آن درگیر شوند. افزودن بخشی که آخرین نظرات را در پستهای وبلاگ شما نشان می‌دهد، می‌تواند به فعال نگه داشتن جامعه شما کمک کند.
- لینک های رسانه های اجتماعی – احتمالاً یک حساب فیس بوک، اینستاگرام، توییتر یا یوتیوب دارید که در آن مرتباً به روز رسانی های مربوط به وب سایت یا سایر محتوایی را که خوانندگان ممکن است مفید بدانند ارسال می کنید. قرار دادن پیوندهای تمام حساب های رسانه های اجتماعی محبوب خود در یک مکان می تواند به شما کمک کند فالوورهای بیشتری داشته باشید.
- محتوای تبلیغاتی – یک نوار کناری همچنین می تواند منبع درآمد اضافی برای شما باشد اگر محتوای حمایت شده یا تبلیغات را در جایی در آن قرار دهید.
برای این آموزش، من یک نوار کناری ایجاد خواهم کرد که شامل نوار جستجو، لیست پست های اخیر و پیوندهای رسانه های اجتماعی است.
انتخاب تم مناسب
همه تم های وردپرس از نوار کناری پشتیبانی نمی کنند. بنابراین، برای شما مهم است که از قبل بررسی کنید که آیا موضوع شما از آنها پشتیبانی می کند یا خیر. همچنین می توانید تم های موجود در دایرکتوری وردپرس را فیلتر کنید تا فقط فیلترهایی را که مضامین آنها را نشان می دهد.
من از موضوع وبلاگ در این آموزش اما می توانید از هر تم دیگری که دوست دارید استفاده کنید.
همچنین می‌توانید با ایجاد تم‌های کودک، یک نوار کناری به تم موجود خود اضافه کنید، اما کمی فنی می‌شود. بدون استفاده از هیچ کدی در اینجا یک نوار کناری به موضوع خود اضافه می کنیم.
تغییر طرح وبلاگ
پس از نصب و فعال سازی افزونه، باید به آن مراجعه کنید ظاهر > سفارشی کردن از داشبورد مدیریت وردپرس.
حال به سراغ طرح کلی گزینه منو و به روز رسانی طرح بندی یک پست وبلاگ و همچنین صفحه اصلی وبلاگ یا صفحه فهرست.
انتخاب کنید تک طرح از گزینه های منو و چیزی شبیه به این خواهید دید. می‌توانید با انتخاب طرح‌بندی از این صفحه، طرح‌بندی صفحه اصلی وبلاگ را به روشی مشابه به‌روزرسانی کنید طرح بندی وبلاگ گزینه.
این یک نوار کناری خالی به تمام پست های وبلاگ ما مانند شکل زیر اضافه می کند.
اکنون ویجت هایی را به نوار کناری خود اضافه می کنیم تا محتوای مرتبط را نمایش دهیم. سر به ظاهر > ابزارک ها و چیزی شبیه به تصویر زیر خواهید دید. گسترش دهید ناحیه ویجت نوار کناری برای شروع.
کلیک کنید بر روی + برای اضافه کردن یک بلوک جدید و سپس کلیک کنید مرور همه. با این کار لیستی از تمام ویجت ها و بلوک های موجود باز می شود. ویجت Search را پیدا کنید و آن را در اولین محفظه بلوک رها کنید.
حالا روی + نماد زیر ویجت جستجو و انتخاب کنید گروه از پاپ آپی که ظاهر می شود. شما گزینه ای برای انتخاب یک طرح بندی برای گروه بلوک دریافت خواهید کرد. انتخاب پشته گزینه ای برای چیدمان بلوک ها به صورت عمودی.
حالا یک را اضافه کنید سرفصل بلوک به بالای گروه و تنظیم محتوای آن به پستهای اخیر.
اکنون ویجت دیگری را به همین گروه با کلیک کردن بر روی آن اضافه می کنیم + آیکون. انتخاب کنید آخرین پست ها از پاپ آپی که ظاهر می شود. اگر آن را در پاپ آپ نمی بینید، روی آن کلیک کنید مرور همه و اونجا پیداش کن
کلیک کنید روی به روز رسانی را فشار دهید و سپس هر پست وبلاگ را دوباره بارگذاری کنید، چیزی شبیه به تصویر زیر خواهید دید.
گنجاندن بلوک عنوان و ویجت آخرین پست‌ها در همان گروه مهم بود زیرا نمی‌خواستیم آنها جعبه‌های جداگانه‌ای مانند نوار جستجو داشته باشند.
اکنون، روی + نماد زیر لیست پست های اخیر و سپس یکی دیگر را اضافه کنید گروه اینجا را مسدود کنید را تنظیم کنید چیدمان به پشته به منظور نمایش تمام بلوک های تشکیل دهنده به صورت عمودی.
یک بلوک عنوان را به گروه جدید اضافه کنید و محتوای آن را روی آن تنظیم کنید ارتباط با ما. دوباره روی + را انتخاب کنید نمادهای اجتماعی ویجت پس از کلیک بر روی مرور همه دکمه. این تصویر زیر را به شما نشان می دهد.
اکنون می توانید به تمام حساب های رسانه های اجتماعی خود پیوند دهید. پس از افزودن آیکون ها باید روی آنها کلیک کنید تا پیوند حساب های خود را ارائه دهید. آیکون ها تنها زمانی در قسمت جلو ظاهر می شوند که پیوندی را ارائه دهید.
اکنون نوار کناری شما باید مانند تصویر زیر باشد.
سبک دادن به عناصر مختلف
نوار کناری ما اکنون تمام محتوایی را دارد که می‌خواهیم داشته باشد. با این حال، برخی از بخش‌های نوار کناری کمی دور به نظر می‌رسند. به عنوان مثال، بین فیلد ورودی جستجو و دکمه جستجو فاصله وجود ندارد. همچنین آیکون های رسانه های اجتماعی که اضافه کردیم کاملا گرد نیستند.
خوشبختانه، هر دوی این مشکلات را می‌توان با کمی CSS که می‌توانیم با سر زدن به وب‌سایت خود اضافه کنیم، حل شود. ظاهر > سفارشی کردن > CSS اضافی. تنها کاری که باید انجام دهیم این است که انتخابگر مناسب برای هدف قرار دادن عناصر خود را پیدا کنیم.
شما می توانید قوانین CSS اعمال شده بر روی یک عنصر را با کلیک راست روی آن و سپس انتخاب مشاهده کنید بازرسی کنید. روی نماد + در کنار آن کلیک کنید cls و مرورگر به طور خودکار یک انتخابگر منحصر به فرد را برای استفاده شما فراهم می کند. اکنون می توانید هر قانون سبکی را که می خواهید در این انتخابگر اعمال کنید. من حاشیه راست 0.5rem را در موردم اعمال کرده ام.
1 |
#wp-block-search__input-1 { |
2 |
margin-right: 0.5rem; |
3 |
}
|
به طور مشابه، آیکون های رسانه های اجتماعی را بررسی کنید و خواهید دید که ارتفاع اضافی به دلیل وجود برخی از لایه ها است. با CSS زیر از شر پد و شکل گرد آیکون خلاص شوید:
1 |
.bs-sidebar .bs-widget ul li.wp-social-link.wp-block-social-link { |
2 |
padding: 0px; |
3 |
border-radius: 5px; |
4 |
}
|
اکنون باید این قوانین سبک را مانند شکل زیر در داخل customizer خود قرار دهیم.
می توانید ضربه بزنید انتشار اکنون را فشار دهید و تغییرات در وب سایت منعکس خواهد شد.
افکار نهایی
در این آموزش، من به شما نشان دادم که چگونه به صورت رایگان یک نوار کناری به وب سایت وردپرس خود اضافه کنید. می‌توانید محتوایی را که در نوار کناری ظاهر می‌شود با استفاده از دسته‌ای از ویجت‌ها و سایر بلوک‌های رابط کاربری سفارشی کنید. همچنین این امکان برای شما وجود دارد که استایل اعمال شده در نوار کناری را با کمک سفارشی ساز تم تغییر دهید.
اکنون می توانید برای تمرین، ویجت دیگری را برای نمایش آخرین نظرات در وب سایت در نوار کناری اضافه کنید.
