امروزه با توجه به توسعه وردپرس و قالب های متنوع، یکی از گزینه هایی که در اکثر قالب ها می توان دید شورت کد ستون بندی است. از این شورت کد برای ستون بندی مطالب و محتوا استفاده می شود. آموزش امروز مدرسه وردپرس به ساخت شورت کد ستون بندی وردپرس اشاره دارد. با این آموزش خواهیم توانست ستون بندی های 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]

آموزش ساخت شورت کد ستون بندی وردپرس به پایان رسید

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

موفق باشید

ساخت شورت کد ستون بندی وردپرس

 

0

6 دیدگاه برای “ساخت شورت کد ستون بندی وردپرس

  • سیروس
    - ۱۸ خرداد , ۱۳۹۳

    چند روزی نبودید نگران شده بودیم …
    منتظر مقاله های جدیدتون هستیم…
    با تشکر…

    ۰
  • بهاران
    - ۲۰ خرداد , ۱۳۹۳

    مرسی برای آموزش های خوبتون

    ۰
  • world
    - ۲۴ خرداد , ۱۳۹۳

    سلام

    چند تا سوال داشتم لطفا راهنماییم کنین

    ۱ – تو سایت 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

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

    ایا امکان راهنمایی بیشتر هست؟؟

    ۰

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --