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

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

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

  • ثبت سایدبار جدید در وردپرس
  • ایجاد فایل سایدبار جدید
  • استفاده از سایدبار ساخته شده در مکان دلخواه قالب وردپرس

ثبت سایدبار جدید در وردپرس

برای ثبت سایدبار فابل functions.php قالب را باز کرده و کدهای زیر را به آن اضافه می‌کنیم. درست بعد از php?> :

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'My Sidebar', // نام سایدبار
'id' => 'my-sidebar', // آیدی سایدبار را در اینجا تعیین کنید
'description' => 'my new sidebar', // توضیحی در مورد این سایدبار
'before_widget' => '<div class="widget">', // کد قبل از هر منو
'after_widget' => '</div>', // کد بعد از هر منو
'before_title' => '<h2 class="widget-title">', // قبل از عنوان منو
'after_title' => '</h2>', // بعد از عنوان منو
));
}

در قطعه کد بالا یک سایدبار جدید با نام My Sidebar و آیدی my-sidebar ثبت کردیم. در واقع به وردپرس نصب شده سایدبار جدید را معرفی کردیم! این نام‌ها دلخواه هستند. همچنین می‌توان از نام‌هایی مانند footer-sidebar ،second-sidebar و … استفاده کرد. بهتر است پیش از این کار از عدم وجود سایدباری با این نام و آیدی در قالب مطمئن شوید. سایر توضیحات لازم نیز در کد موجود هستند و شما می‌توانید بر اساس نوع تگ‌های مورد استفاده در قالب، تگ‌های قبل و بعد از هر منو و عنوان را نیز مشخص کنید.
بعد از افزودن این کدها به فایل functions.php، سایدبار به شکل زیر در قسمت مدیریت وردپرس مشاهده می‌شود و می‌توانید به راحتی به این سایدبار، widget و ابزارک‌های دلخواه خود را اضافه کنید:
افزودن سایدبار در وردپرس

ایجاد فایل سایدبار جدید

فایل سایدبار پیش‌فرض قالب‌های وردپرس sidebar.php نام دارد. برای ایجاد سایدبار جدید باید نام آن را چیزی شبیه به sidebar-xyz.php تعیین کنید. به جای xyz هر عبارت دیگری می‌تواند قرار گیرد. در آینده برای استفاده از سایدبار در قالب از همین نام که به جای xyz قرار داده‌ایم، استفاده خواهیم کرد.
در اینجا ما برای نمونه فایلی با نام sidebar-new.php می‌سازیم و آن را در پوشه‌ی اصلی قالب قرار می‌دهیم. در این فایل، قطعه کد زیر را وارد می‌کنیم:

<div id="sidebar">
<?php
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('my-sidebar')):
endif; ?>
</div>

توجه کنید که my-sidebar موجود در خط 3 کد، آیدی سایدباری است که پیش‌تر ساختیم.

نحوه‌ی استفاده از سایدبار در قالب‌های وردپرسی

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

<?php get_sidebar('new'); ?>

افزودن سایدبار در وردپرس

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

جمع‌بندی:

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

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

 

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۵۳ دیدگاه
nafis ۱۵ تیر ۱۴۰۰، ۱۸:۰۰
اوکی بود مرسی
مهدی ۰۱ مرداد ۱۳۹۹، ۰۴:۱۵
سلام اگه بخواهیم 2 تا ساید بار جدید درست کنیم چی کار کنیم من دو بار همین کد ها را کپی کردم و با رعایت 2 اسم 2 بار انجام دادم اولی را نمایش میدهد ولی دومی را نمایش نمیده!
نازنین گودرزی ۲۰ شهریور ۱۳۹۹، ۲۳:۳۸
مراحل رو یک بار دیگه از اول بررسی کنید. در نهایت از تنظیمات نمایش وردپرس، بخش ویجت‌ها، دومی رو هم اضافه کنید.
mostafa ۲۳ تیر ۱۳۹۹، ۱۲:۴۵
اینجوری که میگن وردپرس راحته .به نظر من که خیلی هم سخته.
Mohsen ۱۳ اردیبهشت ۱۳۹۲، ۲۲:۰۹
عالی بود!
سعید ۰۸ فروردین ۱۳۹۲، ۱۲:۴۱
سلام خب بخوایم ساید بار چپ یا راست معرفی کنیم چه تغییراتی بایدایجاد کرد یا ساید بار رو در فوتر یا هیدر نیز بخواهیم ایجاد کنیم ممنون
علی ۲۶ اسفند ۱۳۹۱، ۰۳:۱۴
دستتون درد نکنه
خیلی مفید بود
alireza ۰۱ اسفند ۱۳۹۱، ۱۱:۳۴
سلام آقا لقمان من همهی این کارا رو کردم فقط الان یه مشکل دارم که وقتی یه ابزارک رو درگ می کنم و فعالش می کنم تو سایت به نمایش در نمی آد !
البته وقتی صفحه ابزارک ها رو هم رفرش می کنم ابزارک هایی که فعال کردم غیر فعال می شن انگار نه انگار ...
البته من روی لوکال همه ی اینکار ها رو کردم!
احسان ۲۱ بهمن ۱۳۹۱، ۲۰:۰۴
سلام
قربان من سایدبار ها رو درست کردم، اما بلد نیستم که بزارم سمت راست سایتم، میاد زیر سایدبار قبلی.یه راهنمایی می کنید؟
مرسی
هادی ۱۵ بهمن ۱۳۹۱، ۱۱:۲۴
سلام آقای آوند ممنون از آموزش های خوبتون
من میخواستم داخل همین سایدباری که آموزششو دادید یه فایل ( تبلیغات متنی) html یا محتویاتش رو به نمایش بذارم باید چی کار کنم ؟
لقمان آوند ۱۵ بهمن ۱۳۹۱، ۱۳:۵۷
می تونید یه ویجت متنی اضافه کنید از تو پنل وردپرستون و بعد درون اون کد تبلیغاتی بزارید .
کران ۰۸ بهمن ۱۳۹۱، ۱۳:۴۹
:oops: :oops: با سلام
ببخشید آقای مهندس آوند اگه میشه لطف کنید به صفحه ی سایت زیر یه سری بزنید و جواب من رو بدید . مثل اینکه شما خیلی خیلی خیلی واردید.ممنون
http://forum.wp-parsi.com/topic/5035-افزودن-ستون-سمت-چپ-به-سایت-وردپرسی/page__st__10__gopid__43545
لقمان آوند ۰۸ بهمن ۱۳۹۱، ۱۵:۴۴
سلام
توی انجمن مشکل دقیقتون رو مطرح کنید . سعی می کنیم پاسخ بدیم سریعا .
نرگس ۱۳ شهریور ۱۳۹۱، ۰۸:۳۰
ممنون مگه دنبال افزونه رایگان استم که عوض هدر مثل هدر قبلی سون لرن تصاور رد بشن.
لقمان آوند ۱۳ شهریور ۱۳۹۱، ۱۳:۰۹
اونو خودم نوشته بودم و به صورت دستی آدرس عکس هاو لینکشون رو وارد میکردم که راحت نبود و واسه همین برداشتمش . تا حالا هم از افزونه های این کار استفاده نکردم که به شما یکی رو معرفی کنم . افزونه زیاد هست . بازم جوابم جستجو به دنبال افزونه های اسلایدر وردپرس هست . اکثرا هم رایگان هستند .
نرگس ۱۲ شهریور ۱۳۹۱، ۱۵:۴۵
سلام آقای آوند،
میخواستم بدونم چگونه میتونم یی سلایدر به وب سایت که دارم رویش کار میکنم بذارم

قبلاً در سون لرن این سلایدر موجود بود اما حالا حذف اش کردین
منم میخاهم همسان آن یی سلایدر که تصاویر آن به شکل خودکار تبدیل شود اضافه کنم
دستون درد نکند
لقمان آوند ۱۲ شهریور ۱۳۹۱، ۲۱:۵۹
با واژه های best slider plugin for wordpress سرچ کنید . کلی اسلایدر گیر میارید .
hamseda1986 ۲۵ مرداد ۱۳۹۱، ۲۳:۰۳
سلام. من وقتی زیر دسته برای دسته هام تعریف می کنم، این زیر دسته مثل دشته ها نمایش داده می شود. چه طوری مثل سایت شما نمایش می تونم نشون بدم؟
ممنون
لقمان آوند ۲۶ مرداد ۱۳۹۱، ۲۲:۱۱
افزونه هایی برای اینکار وجود داره . الان حضور ذهن ندارم دقیقا ...
hami.mrwp ۱۷ مرداد ۱۳۹۱، ۱۴:۲۱
سلام

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

یک ساید بار هم در سمت چپ
لقمان آوند ۱۷ مرداد ۱۳۹۱، ۱۵:۲۳
بله میشه . منتهی باید قالبتون رو دوسایدباره طراحی کنید !
majid ۱۱ مرداد ۱۳۹۱، ۰۰:۲۱
اقا لقمان واقعا خسته نباشید.

میشه واسه ساختن سایدبار وبلاگ (بلاگفا) هم یک آموزش بذارید یا اینکه کمکم کنید
.

ممنون :oops:
لقمان آوند ۱۱ مرداد ۱۳۹۱، ۰۰:۲۶
سلام
اونکه چیزه خاصی نداره . کد چند تا قالب رو ببین متوجه میشی .
سپهر ۰۲ مرداد ۱۳۹۱، ۱۲:۳۵
با عرض سلام و خسته نباشید
من یک قالب برای سایت خودم پیدا کردو و اون ادیت کردم وقتی تو وردپرس فعال کردم دیدم ابزار غیر فعال هست تمام کارها انجام دادم و دیدم زمانی که ابزار اضافه میشه وقتی قالب دوباره بررسی میکنم بهش اضافه نمیشه خواستم کمکم کنید واقعا من با مشکل بر خوردم با تشکر از شما دوست ارجمند
لقمان آوند ۰۲ مرداد ۱۳۹۱، ۱۲:۵۹
سلام
شاید قالب از ابزارها پشتیبانی نمی کنه و قدیمی باشه .
tichismor ۱۲ تیر ۱۳۹۱، ۰۹:۰۴
شرمنده اخلاق حرفه ایت فقط برات مزاحمت دارم :دی
عدم دانش در مورد کد نویسیه دیگه :دی

یه سوال دیگه فک کنم تموم شه :دی
چطوری عنوان ابزارک ها رو توی فوتر bold کنم و سایز و فونتش رو عوض کنم ؟؟؟

واقعا شرمندم از اینکه مزاحمت ایجاد کردم :دی
محمدسینا معراجیان ۱۴ تیر ۱۳۹۱، ۱۶:۲۸
برای بولد کردن از تگ b و برای تغییر ساز از این تگ
font size="عدد مورد نظر"
هر دو تگ نیازمند تگ پایانی هستند
tichismor ۱۲ تیر ۱۳۹۱، ۰۸:۲۴
آقا شد دمت گرم یه دونه باشی فاز دادی :دی
واقعا ازت سپاسپگذارم
tichismor ۱۲ تیر ۱۳۹۱، ۰۰:۲۱
آقا از این که پاسخگویی واقعا سپاسگذارم
ولی اگه امکانش هست میشه بگی این کد رو کجا کپی کنم ؟
تو function گذاشتم ارور داد

Parse error: syntax error, unexpected ':', expecting ')' in /home/infinity/domains/infpot.ir/public_html/wp-content/themes/flowhub/functions.php on line 461

این هم ارورش :(
بازم ممنون از پاسخگوییتون
لقمان آوند ۱۲ تیر ۱۳۹۱، ۰۰:۵۴
اول فایل یه php؟> هست . یه اینتر بزن تو خط بعدش کپی کن .
tichi ۰۹ تیر ۱۳۹۱، ۱۹:۲۲
سلام دوست عزیز من برای فوتر برای سایت اینو میخوام
وقتی اضافه می کنم فوتر سایت میریزه به هم و این شکلی میشه فکر می کنی باید چی کار کرد ؟؟؟؟

http://www.pnuforums.ir/upload/91/4/1341016466.jpg

راستش با این قالبی که رو سایته خیلی حال کردم فقط مشکلش همینه که فوتر رو داشته باشم و اونم 4 تا کنار هم

این مشکل کلی و اینکه وقتی میخوام 4 تا ردیف کنار هم داشته باشم به مشکل می خوره
میام تو Function چهار بار متن رو کپی می کنم با نام های مختلف و 4 تا sidebar جدید ایجاد می کنم و کد مربوطه رو 4 بار تو فوتر با ذکر نام های درستشون قرار میدم ولی ایراد میگیره و کلا سایت بالا نمیاد و ارور میده

برای اینکار چی کار باید بکنم

پیشاپیش ممنون بابت پاسخت
موفق باشی
لقمان آوند ۱۰ تیر ۱۳۹۱، ۱۸:۲۷
سلام شما باید از تگ های div و ویژگی width و float برای اونها استفاده کنید . یک نمونش رو در زیر می بینید :
[cc]
<div>
<div style="width:24%;float:left;">Box1</div>
<div style="width:24%;float:left;">Box2</div>
<div style="width:24%;float:left;">Box3</div>
<div style="width:24%;float:left;">Box4</div>
</div>
[/cc]
hamid021 ۰۱ تیر ۱۳۹۱، ۱۲:۵۸
آهان! مرسی:)! تشکر بسیار زیاد!
hamid021 ۰۱ تیر ۱۳۹۱، ۱۱:۰۶
سلام مجدد! منظورم اینه: این عکسو ببینید

[cc]
<a href="http://www.p30up.ir/up/b4syp7namoa0m4qbes7y.jpg" target="_blank">عکس</a>
[/cc]

این کد ها رو چجوری از dream weaver روی سایت میشه نمایش داد ! مثه همین کاری که شما میکنین:(
لقمان آوند ۰۱ تیر ۱۳۹۱، ۱۱:۱۲
از dream weaver نیست دوست عزیز . همونطور که گفتم از پلاگینی به نام SyntaxHighlighter استفاده کردم . این پلاگین کدها رو به این شکل در میاره . این صفحه پلاگین مربوطه هست .
hamid021 ۰۱ تیر ۱۳۹۱، ۱۰:۴۸
سلام! یه سوال دارم البته به این بخش بی ربطه ولی سواله دیگه:) ! می خواستم بدونم کدهای برنامه نویسی رو چجوری از برنامه ی dream weaver روی سایت نمایش میدید؟ هر کار کردم نمیشه:| امیدوارم منظورمو فهمیده باشید چیو میگم! همین کد هایی(متنهایی) که تو همین پستم گذاشتید! مرسی!
لقمان آوند ۰۱ تیر ۱۳۹۱، ۱۰:۵۲
سلام
منظورتون رو درست نفهمیدم . ولی اگه منظورتون اینه که کدها رنگی هستند از افزونه SyntaxHighlighter استفاده کردم. سرچ کن در موردش بخون .
313 ۳۰ اردیبهشت ۱۳۹۱، ۲۲:۰۹
درود
به نظر من اگه اسم آموزش را ساخت و یا اظافه کردن ابزارک به وردپرس میذاشتید بهتر بود.
چون اسم واقعیش مربوط به ویجت و ابزارک هست.
لقمان آوند ۳۰ اردیبهشت ۱۳۹۱، ۲۳:۴۴
اینجا داریم سایدبار اضافه می کنیم . در هر سایدبار شما می تونید چندین ابزارک قرار بدید . سایدبارها در بر گیرنده ی ابزارک های وردپرس هستن ..
سجاد ۰۳ اردیبهشت ۱۳۹۱، ۱۶:۲۵
دست آقا لقمان گل درد نکه بابات این پیچ مفید.
تالیا ۲۹ اسفند ۱۳۹۰، ۱۲:۴۱
[cc] [/cc]
با سلام خسته نباشید خدمت آقای آوند
امیدوارم همیشه شاد وسرحال باشی
آقای آوند اگه وقت کردیدلطفا برام آموزش آپلود وب سایت از asp.net به اینترنت رو برام بزارید.دامین و فضا هم گرفتم فقط آپلودش مونده که بلد نیستم ونمی دونم از کجا شروع کنم.
ممنون بابت همه خوبیهاتون
سال تازه تون هم مبارک وامیدوارم سال خوبی برای شما و خانواده محترمتون باشه
[cc] [/cc]
لقمان آوند ۰۷ فروردین ۱۳۹۱، ۲۱:۲۸
خوب تو کنترل پنل هاست شما یه آیکون یا لینک به نام File Manager هست . روش کلیک کنید و به پوشه ی http_docs یا www برید و روی گزینه ی آپلود کلیک کنید و فایل های مربوطه رو انتخاب کنید تا آپلود شن .