اضافه کردن گریدهای CSS طراحی وب سایت در قالب وردپرس
چگونگی استفاده از گرید های CSS در طراحی وب سایت وردپرس که البته برای کسانی که با طراحی وب سایت با وردپرس اشنایی دارند توصیه می شود
}( function my_code_output( $atts, $content
return
; ‘<pre><code>’ . $content . ‘</code></pre>'
{
;('add_shortcode(‘code’, ‘my_code_output
هنگامی که کد بالا در فایل function.php یا پلاگین تم نوشته میشود، کاربر میتواند کد را به محتوای خود اضافه کند:
[code]
;('array = ( ‘Thud’, ‘Night Watch’, ‘Jingo$
[/code]
شورتکدها محتوا را با مواردی که تعیین شده است، جایگذاری میکنند. در این مورد ما میخواهیم بعضی از کدهای HTML را در این دستور لحاظ کنیم. در اینجا موردی را با دستور زیر پیدا می کنیم:
<pre><code>$array = ( ‘Thud’, ‘Night Watch’, ‘Jingo’ );</code></pre>
شما همچنین می توانید برای تغییر آن، پارامترهایی به آن اضافه کنید. برای مثال می توانید نوع کدی که قصد فرمت و تغییر آن را دارد، تعیین کنید:
}(function my_code_output( $atts, $content
)atts = shortcode_atts( array$
‘type’ => ‘php’
;( atts $,(
;'<return ‘<pre class=”language-‘ . $atts[‘type’] . ‘”><code>’ . $content . ‘</code></pre
{
;(' add_shortcode(‘code’, ‘my_code_output
در این مثال، تابع شورتکد، خصوصیات شورتکد را دریافت میکند.()Shortcode_att پیش فرض ها و مقادیر داده شده را برای ایجاد موارد جالب ادغام میکند. یک مورد می تواند زبان را مشخص کند که به عنوان یک کلاس به تگ بیرونی اضافه شود.
[code type=’javascript’]
;['var array = [ ‘Thud’, ‘Night Watch’, ‘Jingo
[/code]
<pre><code>var array = [ ‘Thud’, ‘Night Watch’, ‘Jingo’ ];</code></pre>CSS برای پایه های گرید
نوشتن CSS برای گرید بحث اصلی ما در این مقاله نیست. ما فقط میخواهیم در خصوص ایجاد شورتکد صحبت کنیم. علاوه براین ما میخواهیم از فریم ورک های پایه گرید استفاده کنیم. HTML یک گرید به صورت زیر است:
<'div class=’row>
<div class=’small-12 medium-6 large-3 columns’> Column 1 </div>
<div class=’small-12 medium-6 large-3 columns’> Column 2 </div>
<div class=’small-12 medium-6 large-3 columns’> Column 3 </div>
<div class=’small-12 medium-6 large-3 columns’> Column 4 </div>
</div>
در اینجا دانستن حداقل اطلاعات در خصوص طراحی سایت ضروری است.همچنین در نظر داشته باشید که هر ردیف در یک div با کلاس row ایجاد شود. این شامل چهار کلاس اصلی است: small-n،large-n،medium-n و columns است. کلاس column در تمامی columns ها تعریف میشوند اما بقیه بسته به چیزی که شما میخواهید انجام بدهید دارد. چون پایه این مطلب در خصوص طراحی وب سایت رسپانسیو(واکنش گرا) و برپایه گوشی است، شما باید از اندازه small-n استفاده کنید و سعی کنید تمامی اندازه های خود را بر اساس این مقدار تعیین کنید.
برای گریدهای پایه مقدار column به صورت پیشفرض 12 است. مهمترین مشکل در ایجاد یک گرید، دانستن نقطه شروع و پایان آن می باشد. برای همین شما باید دو شورتکد ایجاد کنید. ما columns ها به عنوان شورتکد در نظرگرفتیم و ردیف های درنظر گرفته شده را برای پوشش آنها استفاده میکنیم. برنامه شورتکد در هنگام استفاده از شورتکد باید متن نهایی را برای استفاده در ویرایشگر مثل شورتکد که استفاده می شود، به کار ببریم. از این طریق، شما کد و خصوصیات را اضافه میکنید.
برای مثال:
[row]
[column medium=”6″ large=”3″] Column 1 [/column]
[column medium=”6″ large=”3″] Column 2 [/column]
[column medium=”6″ large=”3″] Column 3 [/column]
[column medium=”6″ large=”3″] Column 4 [/column]
[/row]
شورتکد ردیف (Row)
این شورتکد خیلی ساده است و فقط کافی است آن را در متن قرار دهید:
}(function my_row( $atts, $content
;'<return ‘<div class=”row”>’ . do_shortcode( $content ) . ‘</div
{
;('add_shortcode( ‘row’, ‘my_row
تابع ()do_shortcode فقط تنها موردی است که ممکن است برای کاربران آشنا نباشد.این تابع باعث میشود که از وجود شورتکد در متن مطمئن شویم. اگر اضافه نشوند، شورتکدها به درستی عمل نمیکنند. شورتکد ستون این نسبت به ردیف کمی پیچیده تر است مخصوصا در ساختارهای fallback:
}(function my_column( $atts, $content
)atts = shortcode_atts( array$
,small’ => 12'
,medium’ => null'
large’ => null'
;( atts$,(
;['atts[‘medium’] = ( $atts[‘medium’] == null ) ? $atts[‘small’] : $atts[‘medium$
;['atts[‘large’] = ( $atts[‘large’] == null ) ? $atts[‘medium’] : $atts[‘large$
;(extract( $atts
;sizes = ‘small-‘ . $small . ‘ medium-‘ . $medium . ‘ large-‘ . $large$
;'<return ‘<div class=”columns ‘ . $sizes . ‘”>’ . do_shortcode( $content ) . ‘</div
{
;('add_shortcode( ‘column’, ‘my_column
خط انفصال برای اینکار شما باید تگ پایان و شروع را در یک ردیف قرار دهید، مانند مثال زیر:
[row]
[column medium=”6″ large=”3″]
Column 1 [/column][column medium=”6″ large=”3″]
Column 2 [/column][column medium=”6″ large=”3″]
Column 3 [/column][column medium=”6″ large=”3″]
Column 4 [/column]
[/row]
البته بیشتر برنامه نویسان از این روش طفره میروند، اما این روش باعث تنظیمات بهتر در بعضی موارد میشود. قبل از نوشتن این عبارتها باید دو چیز مهم را بدانید. اگر خط انفصال بین دو شورتکد قرار نگیرد، وردپرس خط انفصال قرار میدهد. وردپرس تگ پاراگراف باز را درشروع و پاراگراف بسته در انتها قرار میدهد:
}(function my_row( $atts, $content
;($content = preg_replace( “/\[\/column\](\<br \/\>|\<\/p\>.?\<p\>).?\[column/s”, ‘[/column][column’, $conten
;'<return ‘<div class=”row”>’ . do_shortcode( $content ) . ‘</div
{
add_shortcode( ‘row’, ‘my_row
باز هم تاکید میشود که این مقاله بیشتر برای افرادی مفید است که به طراحی وب سایت وردپرس آشنایی داشته باشند و خودشان بتوانند تغییراتی در کدها ایجاد کنند.