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

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

برای این منظور باید به صورت زیر عمل کرد:
ابتدا فایل function.php قالب وردپرس خود را گشوده و سپس کد زیر را در مکان مناسبی از آن قرار دهید:

if ( !function_exists('bigtheme_formatter') ) :

function bigtheme_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', 'bigtheme_formatter', 99);
add_filter('widget_text', 'bigtheme_formatter', 99);

endif;

/**
 * شورت کد ستون بندی ها
 *
 */
function bigtheme_one_third( $atts, $content = null ) {
   return '
<div class="one_third">' . do_shortcode($content) . '</div>

';
}
add_shortcode('one_third', 'bigtheme_one_third');

function bigtheme_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', 'bigtheme_one_third_last');

function bigtheme_two_third( $atts, $content = null ) {
   return '
<div class="two_third">' . do_shortcode($content) . '</div>

';
}
add_shortcode('two_third', 'bigtheme_two_third');

function bigtheme_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', 'bigtheme_two_third_last');

function bigtheme_one_half( $atts, $content = null ) {
   return '
<div class="one_half">' . do_shortcode($content) . '</div>

';
}
add_shortcode('one_half', 'bigtheme_one_half');

function bigtheme_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', 'bigtheme_one_half_last');

function bigtheme_one_fourth( $atts, $content = null ) {
   return '
<div class="one_fourth">' . do_shortcode($content) . '</div>

';
}
add_shortcode('one_fourth', 'bigtheme_one_fourth');

function bigtheme_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', 'bigtheme_one_fourth_last');

function bigtheme_three_fourth( $atts, $content = null ) {
   return '
<div class="three_fourth">' . do_shortcode($content) . '</div>

';
}
add_shortcode('three_fourth', 'bigtheme_three_fourth');

function bigtheme_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', 'bigtheme_three_fourth_last');

function bigtheme_one_fifth( $atts, $content = null ) {
   return '
<div class="one_fifth">' . do_shortcode($content) . '</div>

';
}
add_shortcode('one_fifth', 'bigtheme_one_fifth');

function bigtheme_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', 'bigtheme_one_fifth_last');

function bigtheme_two_fifth( $atts, $content = null ) {
   return '
<div class="two_fifth">' . do_shortcode($content) . '</div>

';
}
add_shortcode('two_fifth', 'bigtheme_two_fifth');

function bigtheme_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', 'bigtheme_two_fifth_last');

function bigtheme_three_fifth( $atts, $content = null ) {
   return '
<div class="three_fifth">' . do_shortcode($content) . '</div>

';
}
add_shortcode('three_fifth', 'bigtheme_three_fifth');

function bigtheme_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', 'bigtheme_three_fifth_last');

function bigtheme_four_fifth( $atts, $content = null ) {
   return '
<div class="four_fifth">' . do_shortcode($content) . '</div>

';
}
add_shortcode('four_fifth', 'bigtheme_four_fifth');

function bigtheme_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', 'bigtheme_four_fifth_last');

function bigtheme_one_sixth( $atts, $content = null ) {
   return '
<div class="one_sixth">' . do_shortcode($content) . '</div>

';
}
add_shortcode('one_sixth', 'bigtheme_one_sixth');

function bigtheme_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', 'bigtheme_one_sixth_last');

function bigtheme_five_sixth( $atts, $content = null ) {
   return '
<div class="five_sixth">' . do_shortcode($content) . '</div>

';
}
add_shortcode('five_sixth', 'bigtheme_five_sixth');

function bigtheme_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', 'bigtheme_five_sixth_last');

حال ستون بندی صورت گرفت و باید فایل را ذخیره نمائیم.
پس از ستون بندی که به صورت کد های PHP گفته شد نوبت به استایل دهی است که شما میتوانید استایل مورد نظر خود را قرار دهید و استابل مورد نظر من نیز به صورت زیر است:

.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;
}

دوستان عزیز کار تمام است و شما میتوانید برطبق این آموزش کار خود را صورت دهید
منبع: بیگ تم مرجع آموزش وردپرس و آموزش ووکامرس