🎁 شروع برنامه نویسی را از ما هدیه بگیرید!
۰ ثانیه
۰ دقیقه
۰ ساعت
۵۳ دیدگاه نظر لقمان آوند
آموزش ساخت سایدبار در وردپرس
آموزش ساخت سایدبار در وردپرس ممکن است در بسیاری از وب‌سایت‌ها، ستونی ثابت را در کنار صفحه مشاهده کرده باشید، که به آن سایدبار گفته می‌شود. مطالبی که درون سایدبار قرار می‌گیرند می‌توانند حاوی بخش‌های مهم سایت، نقشه‌، تبلیغات، مقالات پربازدید و... باشند. سایدبارها را می‌توان در تمامی صفحات وب‌سایت یا تنها صفحات دلخواه به کار برد. سایدبارها از داشبورد مدیریت وردپرس، بخش منوی نمایش و گزینه‌ی ابزارک‌ها در دسترس بوده و می‌توانید آن‌ها را به قالب خود اضافه کنید. استفاده از سایدبار به شما این امکان را می‌دهد تا ظاهر متفاوتی را برای سایت خود امتحان کنید اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید و قصد دارید تا به قالب خود یک سایدبار اضافه کنید، در آموزش افزودن سایدبار در وردپرس با ما همراه باشید.

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

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

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

برای ثبت سایدبار فابل 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:

لقمان آوند ۱۰ مرداد ۱۳۹۱، ۱۹:۵۶

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

majid ۱۱ مرداد ۱۳۹۱، ۲۳:۳۲

سلام. به خدا من از کد مد هیچی سر در نمیارم :cry: ولی دوست دارم واسه وبلاگم ساید بار بذارم. از قالبهای آماده هم خوشم نمیاد آخه توش پر تبلیغات و کلی اشکال تو قالباشون هست که با وبلاگم جور در نمیاد. لطفا کمکم کنید اگه میشه :oops: :cry:

لقمان آوند ۱۲ مرداد ۱۳۹۱، ۱۲:۲۱

نمیشه که بدون هیچ اطلاعی بخواید سایدبار طراحی کنی . اطلاعاتت رو در مورد html و تگ div که برای ساخت سایدبار استفاده میشه افزایش بده .

majid ۱۲ مرداد ۱۳۹۱، ۲۰:۱۴

باشه. مرسی :oops: :cry: :wink:

سپهر ۰۲ مرداد ۱۳۹۱، ۰۸:۰۵

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

لقمان آوند ۰۲ مرداد ۱۳۹۱، ۰۸:۲۹

سلام شاید قالب از ابزارها پشتیبانی نمی‌کنه و قدیمی باشه .

tichismor ۱۲ تیر ۱۳۹۱، ۰۴:۳۴

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

محمدسینا معراجیان ۱۴ تیر ۱۳۹۱، ۱۱:۵۸

برای بولد کردن از تگ b و برای تغییر ساز از این تگ font size="عدد مورد نظر" هر دو تگ نیازمند تگ پایانی هستند

tichismor ۱۴ تیر ۱۳۹۱، ۱۲:۳۳

دستت درد نکنه ولی مشکل اینجاس کجا قرار بدم که فقط عنوان ابزارک‌ها بولد و بزرگ بشه ؟ :دی

محمدسینا معراجیان ۱۴ تیر ۱۳۹۱، ۱۲:۳۶

اون رو باید توی functions.php درست کنید

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؟> هست . یه اینتر بزن تو خط بعدش کپی کن .

tichismor ۱۱ تیر ۱۳۹۱، ۲۱:۴۹

قبول نمیکنه کد رو هر جایی که کپیش می‌کنم ارور میده syntax error, unexpected :(((((((((( فک کنم قبل یا بعد این کد باید یه چیزی اضافه شه :(((

لقمان آوند ۲۳ تیر ۱۳۹۱، ۱۲:۲۸

سلام بد جایی کپی میکنی حتما . یه php؟> اول فایل functions.php هست . یه خط بعد از اون اضافه کن و در اونجا کپی کن .

tichi ۰۹ تیر ۱۳۹۱، ۱۴:۵۲

سلام دوست عزیز من برای فوتر برای سایت اینو میخوام وقتی اضافه می‌کنم فوتر سایت میریزه به هم و این شکلی میشه فکر می‌کنی باید چی کار کرد ؟؟؟؟ http://www.pnuforums.ir/upload/91/4/1341016466.jpg راستش با این قالبی که رو سایته خیلی حال کردم فقط مشکلش همینه که فوتر رو داشته باشم و اونم 4 تا کنار هم این مشکل کلی و اینکه وقتی میخوام 4 تا ردیف کنار هم داشته باشم به مشکل می‌خوره میام تو Function چهار بار متن رو کپی می‌کنم با نام‌های مختلف و 4 تا sidebar جدید ایجاد می‌کنم و کد مربوطه رو 4 بار تو فوتر با ذکر نام‌های درستشون قرار میدم ولی ایراد میگیره و کلا سایت بالا نمیاد و ارور میده برای اینکار چی کار باید بکنم پیشاپیش ممنون بابت پاسخت موفق باشی

لقمان آوند ۱۰ تیر ۱۳۹۱، ۱۳:۵۷

سلام شما باید از تگ‌های div و ویژگی width و float برای اونها استفاده کنید . یک نمونش رو در زیر می‌بینید : [cc] &lt;div&gt; &lt;div style=&quot;width:24%;float:left;&quot;&gt;Box1&lt;/div&gt; &lt;div style=&quot;width:24%;float:left;&quot;&gt;Box2&lt;/div&gt; &lt;div style=&quot;width:24%;float:left;&quot;&gt;Box3&lt;/div&gt; &lt;div style=&quot;width:24%;float:left;&quot;&gt;Box4&lt;/div&gt; &lt;/div&gt; [/cc]

tichismor ۱۱ تیر ۱۳۹۱، ۰۹:۲۶

آقا دمت گرم خیلی فاز دادی :دی یه دونه باشی الان آخرین خروجی که من گرفتم مشابه عکس زیر هست http://www.pnuforums.ir/upload/91/4/1341217534.jpg چطوری این رو تراز کنم و بزارم وسط ؟ که قالب شکیل بشه و اینکه :دی رنگ بخش footerکلا عوض بشه مثل سایت زیر http://temphaa.com/ شرمنده اگه پررویی می‌کنم اگر راضی هستید و مشکلی ندارید پاسخ بدید موفق باشید

لقمان آوند ۱۱ تیر ۱۳۹۱، ۱۵:۳۹

div بیرونی رو بهش ویژگی width و margin اضافه کنید مثل زیر : [cc] &lt;div style=&quot;width:940px;margin:5px auto;&quot;&gt; Boxes dives ... &lt;/div&gt; [/cc]

tichismor ۱۱ تیر ۱۳۹۱، ۱۷:۵۹

آقا دمت گرم واقعا فاز دادی فقط یه مشکلی دارم یه نیگا به سایت بنداز ببین چرا اینجوری ؟ رد رد داره و اینکه میشه رنگشو یه تیکه کرد ؟ یا نه :دی بازم شرمنده پررو گری می‌کنم خیلی مردی موفق باشید

لقمان آوند ۱۱ تیر ۱۳۹۱، ۱۸:۴۲

رده رده شدن مال پس زمینه ایه که برا سلکتور widget وجود داره : [cc] background: url(images/tabs_content_tops.png); [/cc]

hamid021 ۰۱ تیر ۱۳۹۱، ۰۸:۲۸

آهان! مرسی:)! تشکر بسیار زیاد!

hamid021 ۰۱ تیر ۱۳۹۱، ۰۶:۳۶

سلام مجدد! منظورم اینه: این عکسو ببینید [cc] &lt;a href=&quot;http://www.p30up.ir/up/b4syp7namoa0m4qbes7y.jpg&quot; target=&quot;_blank&quot;&gt;عکس&lt;/a&gt; [/cc] این کد‌ها رو چجوری از dream weaver روی سایت میشه نمایش داد ! مثه همین کاری که شما میکنین:(

لقمان آوند ۰۱ تیر ۱۳۹۱، ۰۶:۴۲

از dream weaver نیست دوست عزیز . همونطور که گفتم از پلاگینی به نام SyntaxHighlighter استفاده کردم . این پلاگین کدها رو به این شکل در میاره . <a href="https://7learn.com/open/?u=http://alexgorbatchev.com/SyntaxHighlighter/" rel="nofollow">این صفحه</a> پلاگین مربوطه هست .

hamid021 ۰۱ تیر ۱۳۹۱، ۰۶:۱۸

سلام! یه سوال دارم البته به این بخش بی ربطه ولی سواله دیگه:) ! می‌خواستم بدونم کدهای برنامه نویسی رو چجوری از برنامه ی dream weaver روی سایت نمایش میدید؟ هر کار کردم نمیشه:| امیدوارم منظورمو فهمیده باشید چیو میگم! همین کد هایی(متنهایی) که تو همین پستم گذاشتید! مرسی!

لقمان آوند ۰۱ تیر ۱۳۹۱، ۰۶:۲۲

سلام منظورتون رو درست نفهمیدم . ولی اگه منظورتون اینه که کدها رنگی هستند از افزونه SyntaxHighlighter استفاده کردم. سرچ کن در موردش بخون .

313 ۳۰ اردیبهشت ۱۳۹۱، ۱۷:۳۹

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

لقمان آوند ۳۰ اردیبهشت ۱۳۹۱، ۱۹:۱۴

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

سجاد ۰۳ اردیبهشت ۱۳۹۱، ۱۱:۵۵

دست آقا لقمان گل درد نکه بابات این پیچ مفید.

تالیا ۲۹ اسفند ۱۳۹۰، ۰۹:۱۱

[cc] [/cc] با سلام خسته نباشید خدمت آقای آوند امیدوارم همیشه شاد وسرحال باشی آقای آوند اگه وقت کردیدلطفا برام آموزش آپلود وب سایت از asp.net به اینترنت رو برام بزارید.دامین و فضا هم گرفتم فقط آپلودش مونده که بلد نیستم ونمی دونم از کجا شروع کنم. ممنون بابت همه خوبیهاتون سال تازه تون هم مبارک وامیدوارم سال خوبی برای شما و خانواده محترمتون باشه [cc] [/cc]

لقمان آوند ۰۷ فروردین ۱۳۹۱، ۱۶:۵۸

خوب تو کنترل پنل هاست شما یه آیکون یا لینک به نام File Manager هست . روش کلیک کنید و به پوشه ی http_docs یا www برید و روی گزینه ی آپلود کلیک کنید و فایل‌های مربوطه رو انتخاب کنید تا آپلود شن .

  • چگونه سایدبار را به قالب خود اضافه کنیم؟
  • ثبت سایدبار جدید در وردپرس
  • ایجاد فایل سایدبار جدید
  • نحوه‌ی استفاده از سایدبار در قالب‌های وردپرسی
اشتراک گذاری مقاله در :