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

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

برای این کار ابتدا وارد فایل های قالب وردپرس خود شوید و فایل فانکشن function.php را پیدا کنید و ان را به حالت ویرایش در آورید و کد زیر را در مکانی مناسب جای دهید.لازم به ذکر است حتما قبل از هر کاری از قالب خود یک پشتیبان تهیه کنید.

if ( !function_exists('uptheme_formatter') ) :

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

endif;

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

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

function uptheme_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', 'uptheme_one_third_last');

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

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

function uptheme_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', 'uptheme_two_third_last');

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

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

function uptheme_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', 'uptheme_one_half_last');

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

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

function uptheme_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', 'uptheme_one_fourth_last');

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

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

function uptheme_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', 'uptheme_three_fourth_last');

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

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

function uptheme_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', 'uptheme_one_fifth_last');

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

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

function uptheme_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', 'uptheme_two_fifth_last');

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

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

function uptheme_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', 'uptheme_three_fifth_last');

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

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

function uptheme_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', 'uptheme_four_fifth_last');

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

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

function uptheme_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', 'uptheme_one_sixth_last');

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

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

function uptheme_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', 'uptheme_five_sixth_last');

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

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

کد css زیر را در فایل استایل قالب خود قرار دهید.

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

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

منبع: upthame  مرجع: آموزش ودپرس