رفتن به مطلب

فراخوانی فایل css


hani2200

پست های پیشنهاد شده

سلام

چطوری میتونم داخل کد زیر فایل css فراخوانی کنم؟

final class EDD_saitama {
	/**
	 * Constructor function
	 * @since	1.1.2
	 * @return	void
	 */
	public function __construct() {
		add_filter( 'edd_email_templates', array( 'EDD_saitama', 'add_template' ) );
		add_action( 'edd_email_template_saitama', array( 'EDD_saitama', 'the_template' ) );
	}
	
	/**
	 * Add template
	 * @since	1.1.2
	 * @param	array $templates
	 * @return	array
	 */
	public function add_template( $templates ) {
		$templates['saitama'] = 'سایتاما';
		return $templates;
	}
	
	/**
	 * The template
	 * @since	1.1.1
	 * @return	void
	 */
	 
public function the_template() {
		$img_path = plugins_url( 'img/', __FILE__ );
		
		echo '
		<div class="emailedd">
		  <article class="style"> 
		    <div class="saitama"></div>
					    <div class="imani">
						{email}
                        </div>
			      <div class="saitama"></div>
		</div>
		';
	}
}
new EDD_saitama();

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • ابتدا یک صفحه ی html ایجاد کنید ( مثلا index.html )
  • سپس بخش های آن ( html , header , body و… ) را مشخص کنید
  • یک فایل css ایجاد کنید ( فایل های Css میبایست با فرمت css باشد مثل : style.css )
  • سپس در بخش هدر ( header ) کد زیر را قرار دهید :

 

 
1
<link type="text/css" rel="stylesheet" href="style.css" />

 

بیاید با هم محل قرارگیری این کدها در یک فایل html را بررسی کنیم.

فرض کنید یک فایل داریم با نام index.html و میخواهیم از داخل این فایل به فایل style.css که در پوشه css قرار دارد لینک دهیم.کدهای زیر را در فایل index.html قرار میدهیم

 

 
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>oration</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body></body>
</html>

 

همانطور که در کد فوق ملاحظه می شود حداقل کدهای مورد نیاز برای یک سند اچ تی ام ال (HTML) را وارد ویرایشگر متن کرده ایم. حال برای آنکه بتوانیم به فایل style.css لینک دهیم می بایست داخل تگ <head> و <head/> از تگ جدیدی تحت عنوان <link> استفاده کنیم (لازم به ذکر است که این تگ نیاز به تگ پایانی ندارد).
داخل این تگ از Attribute یی تحت عنوان type به معنی “نوع” استفاده کرده و از آنجا که می خواهیم این تگ را برای یک فایل سی اس اس (CSS) مورد استفاده قرار دهیم می بایست مقدار آن را برابر با text/css قرار دهیم. سپس از Attribute دیگری تحت عنوان rel که مخفف واژه Relation به معنی “رابطه” است استفاده کرده و مقدار آن را برابر با stylesheet قرار می دهیم. در نهایت می بایست به فایل css خود لینک دهیم که برای این کار از Attribute یی تحت عنوان href که مخفف واژگان Hypertext Reference است استفاده کرده و مقدار آن را برابر با آدرس فایل style.css قرار می دهیم. در واقع از آنجا که فایل style.css داخل فولدری تحت عنوان css است از اینرو ابتدا نام فولدر css را نوشته سپس یک / قرار داده و نام فایل خود را می نویسیم. از این پس هر کدی که داخل فایل style.css بنویسیم، در سند اچ تی ام ال (HTML) ما که index.html نام دارد اعمال خواهد شد.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

ب دوستان عزیز در قسمت قبل آموزش فراخوانی کد های CSS در آخر آموزش در مورد اجزای مختلف تابع wp_register_style صحبت کردیم و حالا در این آموزش میپردازیم به ادامه موارد و یک مثال را بررسی میکنیم که به صورت زیر است:

1
&lt;? php // wp_register_style() مثال wp_register_style(     'my-bootstrap-extension', // نام منحصر به فرد     get_template_directory_uri() . '/css/my-bootstrap-extension.css', // آدرس فایل     array( 'bootstrap-main' ), // نام فایل یا فایل های وابسته     '1.2', // شماره نسخه     'screen', // نوع استایل ); ?&gt;

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

خب دوستان عزیز توجه کنید که بعد از ثبت استایل وب سایت وردپرس نوبت به فراخوانی کد های CSS آن استایل ثبت شده است.دوستان عزیز در سیستم مدیریت محتوای وردپرس برای این کار از تابع wp_enqueue_style() استفاده می کنیم.یک مثالی از این مورد به صورت زیر است:

1

&lt;?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?&gt;

نکته مهم این است که پارامتر های این تابع هم مانند تابع wp_register_style() عمل می کنند و به صورت زیر هستند:

$handle: ( رشته ای – لازم ):دوستان عزیز مورد اول کد $handle است .این مقدار شامل یک نام منحصر به فرد برای استایل مورد نظر شما در وب سایت وردپرسی می باشد.توجه کنید که از این مقدار برای فراخوانی در توابع دیگر نیز استفاده می شود.

$src: ( رشته ای – لازم ):مورد بعدی $src است شما دوستان عزیز میتوانید آدرس فایل خود را اینجا قرار دهید

$deps: ( آرایه – اختیاری ) :توجه کنید که در این تابع این مقدار شامل نام منحصر به فرد ( $handle ) سایر فایل های وابسته به آن می باشد.دوستان عزیز موردی که بسیار مهم است این است که اگر فایل شما به درستی کار نکند در صورتی که فایل های استایل دیگر وجود نداشته باشند می توانید از این بخش استفاده کنید.

$ver: ( رشته ای یا منطقی – اختیاری ):دوستان عزیز این مقدار شامل شماره نسخه فایل شما در وب سایت وردپرسی می باشد. شما می توانید شماره نسخه قالب خود را اینجا قرار دهید و اگر نمی خواهید شماره نسخه ای از قالب وردپرس خود داشته باشد میتوانید مقدار آن را null قرار دهید. مقدار پیشفرض این متغیر false است که نسخه وردپرس را اینجا قرار می دهد.

$media: ( رشته ای – اختیاری ):مورد نهایی نیز به صورت مقابل است که این مقدار هم شامل نوع استایل شما در وب سایت وردپرسی می شود. مانند: screen , all و….. اگر نمی خواهید از این مورد در وب سایت خود استفاده کنید آن را ننویسید.

یادت نره بخونیش :   آموزش ویرایش و تغییر کلمات کلیدی پیشفرض در وردپرس

خب دوستان عزیز مثالی از این مورد به صورت زیر است:

1

<?php   // اگر استایل را از قبل ثبت کرده ایم اینطوری فراخوان می کنیم wp_enqueue_style( 'my-bootstrap-extension' );   // اگر فایل از قبل ثبت نشده اینطوری فراخوان می کنیم wp_enqueue_style(     'my-bootstrap-extension', // نام منحصر به فرد فایل     get_template_directory_uri() . '/css/my-bootstrap-extension.css', // آدرس فایل     array( 'bootstrap-main' ), // فایل وابسته     null, // شماره نسخه     // ...بدون نوع استایل ); ?>

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

wp_enqueue_scripts(): برای فراخوانی استایل ها و اسکریپت ها در front-end وب سایت وردپرس

admin_enqueue_scripts(): برای فراخوانی استایل ها و اسکریپت ها در پنل مدیریت وب سایت وردپرسی

login_enqueue_scripts(): برای فراخوانی استایل ها و اسکریپت ها در صفحه ورود وب سایت وردپرسی

مثالی از کد های فوق در زیر آورده شده است:

1

<?php   // فراخوانی css در سایت function mytheme_enqueue_style() {     wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );  } add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );   // فراخوانی css در پنل مدیریت function mytheme_enqueue_options_style() {     wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' );  } add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );   // فراخوانی css در صفحه ورود function mytheme_enqueue_login_style() {     wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' );  } add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );   ?>

خب دوستان کار  آموزش فراخوانی کد های CSS در این مرحله به پایان رسید در ادامه میپردازیم به توابع اضافی که در این قسمت وجود دارد و شما میتوانید از آن ها استفاده نمائید:
اولین مورد در این زمینه افزودن استایل درون خطی با استفاده از تابع wp_add_inline_style() است.شما برای ان منظور میتوانید از قطعه کد زیر استفاده نمائید:

1

<?php   function mytheme_custom_styles() {     wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' ); // فراخوان فایل     $bold_headlines = get_theme_mod( 'headline-font-weight' ); // دریافت مقدار از تنظیمات     $custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }'; // اعمال استایل روی کلاس .headline     wp_add_inline_style( 'custom-style', $custom_inline_style ); } add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );   ?>

همانطور که د قطعه کد فوق میبینید با استفاده از این تابع در وب سایت های وردپرسی میتوان استایل های دررون خطی به قالب وردپرس وب سایت خود اضافه نمائیم.اما مورد دوم نیز کاربردی تر از مورد نخست است و در باره وضعیت فراخوان صحبت میشود.دوستان عزیز نکته مهمی که وجود دارد این است که در بعضی مواقع ممکن است اطلاعاتی درباره فایل فراخوان شده در وب سایت وردپرس خود بخواهیم مثلا فایل ثبت شده چاپ شده فراخوان شده و موارد بسیار دیگر. در این حالت شما دوستان عزیز میتوانید از تابع wp_style_is() استفاده می کنید:

1

<?php   /*  * wp_style_is( $handle, $state );  * $handle - نام استایل  * $state - وضعیت استایل: 'registered', 'enqueued', 'done' یا 'to_do'. پیش فرض: 'enqueued'  */   // wp_style_is()مثال function bootstrap_styles() {       if( wp_style_is( 'bootstrap-main' ) {           // بررسی فایل اگر فراخوان شده         wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );       }   } add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );   ?>

افزودن متا دیتا به استایل

خب دوستان عزیز این تابع نیز گفته شده و شما میتوانید با استفاده از این تابع گفته شده در وب سایت وردپرسی خود وضعیت فراخوانی را مورد بررسی قرار دهید.حال مورد دیگری که وجود دارد نیز این است که روش افزودن متا دیتا به استایل در وب سایت وردپرسی به چه معناست و چه استفاده ای دارد؟ شما دوستان عزیز میتوانید این مورد را در وب سایت وردپرس خود با استفاده از تابع wp_style_add_data() قرار دهید که مثالی از ان به صورت زیر است:

1

2

3

4

5

6

7

<?php   /*  * wp_style_add_data( $handle, $key, $value );  * Possible values for $key and $value:  * 'conditional' رشته      دستورات شرطی برای IE6 , 7 و....  * 'rtl'         رشته|منطقی برای اعلام استایل راست چین  * 'suffix'      رشته      پسوند اختیاری، استفاده می شود در ترکیب با راست چین.  * 'alt'         منطقی        برای rel="alternate stylesheet".  * 'title'       رشته      برای preferred/alternate استایل های.  */   // wp_style_add_data() مثال function mytheme_extra_styles() {     wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );     wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );     /*      * روش استفاده:      * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );

     */

}

  

add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );

  

?>

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

دوست عزیز آموزش اولی فراخوانی css در html هست و در اموزش دومی فراخوانی csss در وردپرس یا php می باشد

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

سلام

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

خواهشا اگه میشه روی سورس توضیح بدین فایل style هم ایجاد کردم از طریق اموزش دوم انجام دادم ولی نشد

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

درود.

محتویات فایلی که قرار دادید و توابعی که در اون استفاده شده شبیه به قالب ایمیل برای افزونه ی EDD در وردپرس هست.

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

<style>
  .text {font-size: 13px;}
</style>

یا اینکه روی خوده کدهای HTML موجود در فایل هاتون، استایل دهی کنید. برای مثال :

<div class="emailedd" style="دستورات استایل">
<article class="style" style="دستورات استایل"> 
<div class="saitama"style="دستورات استایل"></div>
<div class="imani">
{email}
</div>
<div class="saitama"></div>
</div>

 

یا اگر مایل بودید یک فایل خارجی رو لود کنید، می تونید در همون قسمتی که کدهای HTML قالب ایمیل قرار داره، کد زیر رو قرار بدید و لینک مستقیم فایل استایل رو جایگزین کنید:

<link type="text/css" href="http://site.ltd/style.css" rel="stylesheet" />

برای استفاده از این کد، بهتره فایلی که کدهای body و head قالب ایمیل رو در خودش داره رو پیدا کنید و این کد رو داخلش استفاده کنید.

برای فراخوانی فایل استایل به کمک راه آخر، باید کد رو در همون مکانی قرار بدید که کدهای HTML قرار دارند، نه قسمتی که کدهای PHP هستند. مثال طبق کدی که خودتون دادید:

final class EDD_saitama {
	/**
	 * Constructor function
	 * @since	1.1.2
	 * @return	void
	 */
	public function __construct() {
		add_filter( 'edd_email_templates', array( 'EDD_saitama', 'add_template' ) );
		add_action( 'edd_email_template_saitama', array( 'EDD_saitama', 'the_template' ) );
	}
	
	/**
	 * Add template
	 * @since	1.1.2
	 * @param	array $templates
	 * @return	array
	 */
	public function add_template( $templates ) {
		$templates['saitama'] = 'سایتاما';
		return $templates;
	}
	
	/**
	 * The template
	 * @since	1.1.1
	 * @return	void
	 */
	 
public function the_template() {
		$img_path = plugins_url( 'img/', __FILE__ );
		
		echo '
		<link type="text/css" href="http://site.ltd/style.css" rel="stylesheet" />
		<div class="emailedd">
		  <article class="style"> 
		    <div class="saitama"></div>
					    <div class="imani">
						{email}
                        </div>
			      <div class="saitama"></div>
		</div>
		';
	}
}
new EDD_saitama();

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

سلام

ممنون خيلي لطف كردين عالي بود.فقط يه سوال الان محتوای ایمیل از طریق شورت کد {email} ارسال میشه الان اگه بخوام مستقیم درون همین فایل فیلدهاش رو اضافه کنم باید چیکار کنم؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

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

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...