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

نحوه ساخت ستون در وردپرس

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

نحوه نصب و کار با افزونه Column Shortcodes

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

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

سپس برگه یا نوشته مورد نظرتون ذخیره و منتشر کنید و نتیجه را در تصویر زیر مشاهده کنید.

شورت‌کدهای افزونه برای ساخت ستون در وردپرس

• full width: عرض کامل
• one half: یک دوم
• one half (last): تگ پایانی و اتمام بخش دو ستونه
• one third: یک‌ سوم
• one third (last): اتمام بخش سه ستونه و استفاده از فضای باقی مانده
• one fourth: یک چهارم
• one fourth (last): اتمام بخش چهار ستونه
• two third: دو سوم
• two third (last): اتمام بخش دو سوم
• three fourth: سه چهارم
• one fifth: یک پنجم
• two fifth: دو پنجم
• three fifth: سه پنجم
• four fifth: چهار پنجم
• one sixth: یک ششم
• five sixth: پنج ششم

با ترکیب شورتکد های گفته شده می توان ستون بندی خوبی ایجاد کرد.

شما می توانید حتی می توانید یکسری استایل های سفارشی برای ستون ها در نظر بگیرید به فرض مثال یک حاشیه یا مارجین بین ستون ها اضافه کنید، حال به بخش style.css قالب بروید، کد زیر را در آنجا اضافه و در آخر ذخیره کنید.

.one_half {
width: 49% !important;
margin-right: 2% !important;
}
.one_half.last_column {
width: 49% !important;
margin-right: 0px !important;
}
.one_third {
width: 32% !important;
margin-right: 2% !important;
}
.one_third.last_column {
width: 32% !important;
margin-right: 0px !important;
}
.two_third {
width: 66% !important;
margin-right: 2% !important;
}
.two_third.last_column {
width: 66% !important;
margin-right: 0px !important;
}
.one_fourth {
width: 23.5% !important;
margin-right: 2% !important;
}
.one_fourth.last_column {
width: 23.5% !important;
margin-right: 0px !important;
}
.three_fourth {
width: 74.5% !important;
margin-right: 2% !important;
}
.three_fourth.last_column {
width: 74.5% !important;
margin-right: 0px !important;
}
.one_fifth {
width: 18.4% !important;
margin-right: 2% !important;
}
.one_fifth.last_column {
width: 18.4% !important;
margin-right: 0px !important;
}
.two_fifth {
width: 39% !important;
margin-right: 2% !important;
}
.two_fifth.last_column {
width: 39% !important;
margin-right: 0px !important;
}
.three_fifth {
width: 59% !important;
margin-right: 2% !important;
}
.three_fifth.last_column {
width: 59% !important;
margin-right: 0px !important;
}
.four_fifth {
width: 79.6% !important;
margin-right: 2% !important;
}
.four_fifth.last_column {
width: 79.6% !important;
margin-right: 0px !important;
}
.one_sixth {
width: 15% !important;
margin-right: 2% !important;
}
.one_sixth.last_column {
width: 15% !important;
margin-right: 0px !important;
}

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

نکته: هر نوع محتوایی (متن- تصویر- لینک و…) بین شورت‌کد باز و بسته قرار بگیرد، در همان سلول درج خواهد شد.

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

دانلود افزونه