اضافه کردن گریدهای CSS طراحی وب سایت در قالب وردپرس

چگونگی استفاده از گرید های CSS در طراحی وب سایت وردپرس که البته برای کسانی که با طراحی وب سایت با وردپرس اشنایی دارند توصیه می شود

طراحی وب سایت، استفاده از گریدهای CSS خیلی رایج هستند. شکی نیست که این گریدها باعث ایجاد حس ارتباطی بیشتر بین کاربران و وب سایت می گردد.با گرید CSS، به راحتی می توانید لایه و طرح دلخواه خود را در وردپرس ایجاد کنید و در واقع آزادی عمل بیشتری نسبت به قبل دارید. پایگاه پلاگین وردپرس دارای بیشترین پلاگین موجود است از این رو دارای بیشترین میزان کارایی است. در ادامه ما چند گرید شورتکد برای استفاده در وردپرس را معرفی می کنیم. این گریدها را به راحتی می توان در طراحی وب سایت وردپرس استفاده کرد. البته خواندن این مطلب برای کسانی که به برنامه نویسی با وردپرس آشنایی دارند، توصیه میشود. Shortcode 101 در حالت عمومی ایجاد شورتکد کار خیلی آسانی است. تنها کاری که باید انجام دهید، تابع شورتکد مورد نظر که با محتوا و طراحی وب سایت ما مطابقت دارد، طبق دستور add_shortcode() function و به صورت اضافه کنیم:

}( 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


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