امروزه با توجه به توسعه وردپرس و قالب های متنوع، یکی از گزینه هایی که در اکثر قالب ها می توان دید شورت کد ستون بندی است. از این شورت کد برای ستون بندی مطالب و محتوا استفاده می شود. آموزش امروز مدرسه وردپرس به ساخت شورت کد ستون بندی وردپرس اشاره دارد. با این آموزش خواهیم توانست ستون بندی های 1/2،1/3،1/4،1/5 و 1/6 بسازیم. مانند تصویر زیر:
بسیار خب شروع می کنیم.
قدم اول: کدهای php
در قدم اول ساخت شورت کد ستون بندی وردپرس ، فایل functions.php پوسته خود را باز کرده و کد زیر را داخل آن قرار دهید:
if ( !function_exists('wpschool_formatter') ) : function wpschool_formatter($content) { $new_content = ''; /* جور کردن محتوا با تگ های باز و بسته */ $pattern_full = '{(\[raw\].*?\[/raw\])}is'; $pattern_contents = '{\[raw\](.*?)\[/raw\]}is'; /* تقسیم محتویات در بخش های جداگانه */ $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE); /* حلقه بخش ها */ foreach ($pieces as $piece) { if (preg_match($pattern_contents, $piece, $matches)) { $new_content .= $matches[1]; } else { $new_content .= wptexturize(wpautop($piece)); } } return $new_content; } remove_filter('the_content', 'wpautop'); remove_filter('the_content', 'wptexturize'); add_filter('the_content', 'wpschool_formatter', 99); add_filter('widget_text', 'wpschool_formatter', 99); endif; /** * شورت کد ستون بندی ها * */ function wpschool_one_third( $atts, $content = null ) { return '<div class="one_third">' . do_shortcode($content) . '</div>'; } add_shortcode('one_third', 'wpschool_one_third'); function wpschool_one_third_last( $atts, $content = null ) { return '<div class="one_third last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('one_third_last', 'wpschool_one_third_last'); function wpschool_two_third( $atts, $content = null ) { return '<div class="two_third">' . do_shortcode($content) . '</div>'; } add_shortcode('two_third', 'wpschool_two_third'); function wpschool_two_third_last( $atts, $content = null ) { return '<div class="two_third last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('two_third_last', 'wpschool_two_third_last'); function wpschool_one_half( $atts, $content = null ) { return '<div class="one_half">' . do_shortcode($content) . '</div>'; } add_shortcode('one_half', 'wpschool_one_half'); function wpschool_one_half_last( $atts, $content = null ) { return '<div class="one_half last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('one_half_last', 'wpschool_one_half_last'); function wpschool_one_fourth( $atts, $content = null ) { return '<div class="one_fourth">' . do_shortcode($content) . '</div>'; } add_shortcode('one_fourth', 'wpschool_one_fourth'); function wpschool_one_fourth_last( $atts, $content = null ) { return '<div class="one_fourth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('one_fourth_last', 'wpschool_one_fourth_last'); function wpschool_three_fourth( $atts, $content = null ) { return '<div class="three_fourth">' . do_shortcode($content) . '</div>'; } add_shortcode('three_fourth', 'wpschool_three_fourth'); function wpschool_three_fourth_last( $atts, $content = null ) { return '<div class="three_fourth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('three_fourth_last', 'wpschool_three_fourth_last'); function wpschool_one_fifth( $atts, $content = null ) { return '<div class="one_fifth">' . do_shortcode($content) . '</div>'; } add_shortcode('one_fifth', 'wpschool_one_fifth'); function wpschool_one_fifth_last( $atts, $content = null ) { return '<div class="one_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('one_fifth_last', 'wpschool_one_fifth_last'); function wpschool_two_fifth( $atts, $content = null ) { return '<div class="two_fifth">' . do_shortcode($content) . '</div>'; } add_shortcode('two_fifth', 'wpschool_two_fifth'); function wpschool_two_fifth_last( $atts, $content = null ) { return '<div class="two_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('two_fifth_last', 'wpschool_two_fifth_last'); function wpschool_three_fifth( $atts, $content = null ) { return '<div class="three_fifth">' . do_shortcode($content) . '</div>'; } add_shortcode('three_fifth', 'wpschool_three_fifth'); function wpschool_three_fifth_last( $atts, $content = null ) { return '<div class="three_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('three_fifth_last', 'wpschool_three_fifth_last'); function wpschool_four_fifth( $atts, $content = null ) { return '<div class="four_fifth">' . do_shortcode($content) . '</div>'; } add_shortcode('four_fifth', 'wpschool_four_fifth'); function wpschool_four_fifth_last( $atts, $content = null ) { return '<div class="four_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('four_fifth_last', 'wpschool_four_fifth_last'); function wpschool_one_sixth( $atts, $content = null ) { return '<div class="one_sixth">' . do_shortcode($content) . '</div>'; } add_shortcode('one_sixth', 'wpschool_one_sixth'); function wpschool_one_sixth_last( $atts, $content = null ) { return '<div class="one_sixth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('one_sixth_last', 'wpschool_one_sixth_last'); function wpschool_five_sixth( $atts, $content = null ) { return '<div class="five_sixth">' . do_shortcode($content) . '</div>'; } add_shortcode('five_sixth', 'wpschool_five_sixth'); function wpschool_five_sixth_last( $atts, $content = null ) { return '<div class="five_sixth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>'; } add_shortcode('five_sixth_last', 'wpschool_five_sixth_last');
با استفاده از کد بالا، شورت کد ستون بندی وردپرس را به پوسته معرفی کردیم. حال فایل را ذخیره کنید.
قدم دوم: استایل دهی به ستون ها
قدم دوم در آموزش ساخت شورت کد ستون بندی وردپرس ، استایل دهی به ستون ها می باشد. پس کد زیر را داخل فایل استایل خود قرار دهید:
/* تعیین میزان عرض هر ستون */ .one_half { /* عرض ستون بندی 1/2 */ width: 49%; } .one_third { /* عرض ستون بندی 1/3 */ width: 32%; } .one_fourth { /* عرض ستون بندی 1/4 */ width: 23.5%; } .one_fifth { /* عرض ستون بندی 1/5 */ width: 18.4%; } .one_sixth { /* عرض ستون بندی 1/6 */ width: 15%; } .one_half, .one_third, .two_third, .one_fourth, .three_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { float: right; margin-left: 2%; margin-bottom: 15px; text-align: right; min-height:100px; } .one_half.last, .one_third.last, .two_third.last, .one_fourth.last, .three_fourth.last, .one_fifth.last, .two_fifth.last, .three_fifth.last, .four_fifth.last, .one_sixth.last, .five_sixth.last { margin-left: 0; }
فایل را ذخیره کنید.
حال نوبت به این رسیده که شورت کد ها را قرار داده و خروجی را ببینیم. نحوه استفاده از شورت کد بدین صورت است که کدهای زیر را داخل یک برگه یا نوشته جدید قرار دهید:
کد ستون بندی 1/2:
[one_half] متن مورد نظر اینجا قرار می گیرد .... [/one_half] [one_half_last] متن مورد نظر اینجا قرار می گیرد .... [/one_half_last]
کد ستون بندی 1/3:
[one_third] متن مورد نظر اینجا قرار می گیرد .... [/one_third] [one_third] متن مورد نظر اینجا قرار می گیرد .... [/one_third] [one_third_last] متن مورد نظر اینجا قرار می گیرد .... [/one_third_last]
کد ستون بندی 1/4:
[one_fourth] متن مورد نظر اینجا قرار می گیرد .... [/one_fourth] [one_fourth] متن مورد نظر اینجا قرار می گیرد .... [/one_fourth] [one_fourth] متن مورد نظر اینجا قرار می گیرد .... [/one_fourth] [one_fourth_last] متن مورد نظر اینجا قرار می گیرد .... [/one_fourth_last]
کد ستون بندی 1/5:
[one_fifth] متن مورد نظر اینجا قرار می گیرد .... [/one_fifth] [one_fifth] متن مورد نظر اینجا قرار می گیرد .... [/one_fifth] [one_fifth] متن مورد نظر اینجا قرار می گیرد .... [/one_fifth] [one_fifth] متن مورد نظر اینجا قرار می گیرد .... [/one_fifth] [one_fifth_last] متن مورد نظر اینجا قرار می گیرد .... [/one_fifth_last]
کد ستون بندی 1/6:
[one_sixth] متن مورد نظر اینجا قرار می گیرد .... [/one_sixth] [one_sixth] متن مورد نظر اینجا قرار می گیرد .... [/one_sixth] [one_sixth] متن مورد نظر اینجا قرار می گیرد .... [/one_sixth] [one_sixth] متن مورد نظر اینجا قرار می گیرد .... [/one_sixth] [one_sixth] متن مورد نظر اینجا قرار می گیرد .... [/one_sixth] [one_sixth_last] متن مورد نظر اینجا قرار می گیرد .... [/one_sixth_last]
آموزش ساخت شورت کد ستون بندی وردپرس به پایان رسید
دمو کدهای بالا در تصویر زیر نمایش داده شده است.
موفق باشید
چند روزی نبودید نگران شده بودیم …
منتظر مقاله های جدیدتون هستیم…
با تشکر…
مرسی برای آموزش های خوبتون
سلام
چند تا سوال داشتم لطفا راهنماییم کنین
۱ – تو سایت wordpress.com امکان ست کردن دامنه .IR هست؟ بدلیل تحریمات جلوگیری
نمیکنن؟
۲- تو وبلاگ های شخصی که تو wordpress.com درست کردیم امکان گذاشتن تبلیغات هست؟
۳-با خرید پلن vip از wordpress.com ، چه امکاناتی رو در اختیارمون قرار میده؟
۴- آیا تو wordpress.com میشه بجای دامنه اصلی یه ساب دامین ست کرد؟ مثلا
world.example.com
مرسی/.
سلام دوست من.
سوال ۱: بله امکانش هست
سوال۲: خیر امکان گذاشتن تبلیغات در وبلاگ نیست
سوال۳: امکانات را خود سایت ذکر کرده
https://signup.wordpress.com/signup/?site=test
سوال۴: خیر این کار رو نمیشه انجام داد
فوق العاده بود
بسیار ممنون بابت وب سایت خوبتون
سلام…..با عرض پوزش.. از تم اماده صحیفه استفاده میکنم… امکان ستون بندی نداره…. میخاستم از کد شما استفاده کنم اما نمیدونم کجا برم…
یعنی راستش
spadanaclub.ir / httpdocs / wp-content / themes / my-sahifa-b / functions.php
و
spadanaclub.ir / httpdocs / wp-content / themes / my-sahifa-b / style.css
رفتم و اخر نوشته اون چیزایی که اینجا بود را کپی کردم اما بعدش دیدم سایت شده بود خرچنگ قورباغه 🙂
ایا امکان راهنمایی بیشتر هست؟؟
کانال تلگرام
عضویت در کانال
سایر مقالات