خانه / وردپرس / آموزش وردپرس / بارگذاری استایل ها روی وب سایت
بارگذاری استایل ها روی وب سایت
بارگذاری استایل ها روی وب سایت

بارگذاری استایل ها روی وب سایت

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

بارگذاری استایل ها روی وب سایت

دوستان شاید شما فکر می کنید که برای داشتن سایت زیبا برای اهداف مختلف باید از فانکشن ( )wp_enqueue_style استفاده نمایید اما این طور نبوده و شما باید از سه اکشن استفاده نمایید بنابراین اگه مایلید با ما همراه بمانید تا 3 کد کاربردی وردپرس رو جهت استفاده در تمهای خود معرفی نماییم و آشنا سازیم

wp_enqueue_scripts : جهت با رگذاری نمودن استایل و اسکریپت روی سایت

admin_enqueue_scripts : برای بار گذاری استایل و اسکریپت در پنل مدیریت

login_enqueue_scripts : جهت بار گذاری استایل و اسکریپت در log in ( قسمت ورود )

برای مثال می تونید در زیر کد کاربردی وردپرس رو مشاهده نمایید

<?php
// load css into the website's front-end
function mytheme_enqueue_style() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
// load css into the admin pages
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' );
// load css into the login page
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}:

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

از ظاهر های طراحی شده ی درون خطی استفاده نمایید و از اونا با تابع  ()wp_add_inline_style پرینت بگیرید.

در زیر خواهید توانست نمونه ای رو که قبلا طراحی شده است مشاهده نمایید

<?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' ); // let's say its value is "bold"
$custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
wp_add_inline_style( 'custom-style', $custom_inline_style );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );
?>

در اینجا می خوام سوالی بپرسم که جهت بار گذاری سریع استایل ها چه کنیم ؟ شاید الان بنا به داشتن سرعت بالای اینترنت مشکلی نباشد اما با کم شدن سرعت به مشکل برخواهید خورد چه میکنید ؟ دوستان عواملی که بیشتر باعث سنگینی می شوند انیمیشن و عکس بوده اند که در زیر بررسی خواهیم نمود

تگ های HTML و کد های جاوا به ما به بهتر نمایش دادن عکس ها و متن در سایت کمک می نمایند تا متفاوت باشیم و با ذخیره نمودن فایل با این کدها سایز فایل زیادتر می شود شاید برخی از شما ها بگید این مشکل به خاط متن ها بوده است اما نه بلکه برعکس به خاطر تگ ها می باشد حالا که این به دیر لود شدن سایت منجر می شود ما در زیر می خواهیم بررسی نماییم تا در عین حفظ تم  ،استایل و دیزاین پیج این مشکلو حل نماییم

سایز تصاویر:

اول : دوستان در قسمت آموزش سئو ما اشاره نمودیم که برای جذب بیشتر کاربر و همچنین زیبایی سایت باید متن و به همراه تصویر قرار داد زیرا هم باعث زیبایی , درک بهتر و … می شود و سایز لازمه هر تصویر 72dpi می باشد که با این اندازه دیگر بدون نیاز به فشرده سازی کیفیت استاندارد رو خواهید داشت , برخی از دوستان فک می کنند با قرار دادن تصویر در سایز بزرگ کیفیت خوبی رو به تصویر می دهند اما این چنین نبوده و فقط باعث افزایش حجم می شوند

دوم : در قسمت تنظیمات تصویر حتما ارتفاع , طول و عرض تصویر رو مشخص نمایید و با این حال مرورگر متن ها رو قبل بار گذاری تصویر تنظیم می کند که این تقریبا مشکل دیر لود شدن رو حل می نماید

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

چهارم : تصاویر شاخص و لوگو رو به صورت جدا و در فایلی مشترک قرار دهید که حرفه ای ها رعایت می نمایند و ممکنه این براتون یک سئوال باشد که چرا ؟

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

پنجم : دوستان محتوای تازه سایت رو در بالا نگه دارید که از هر لحاظ بهتر می باشد و از کند شدن سایت جلوگیری می نماید اما متاسفانه سایتهایی بوده اند که تبلیغات رو در بالا قرار می دهند و برای دیدن محتوا باید به فوتر نزدیک شویم

فایر فاکس و ابزار آن:

امروزه تقریبا افراد از فایرفاکس استفاده می نمایند و ابزاری رو دارد که برای بالا بردن سرعت سایت می تونه کمک نماید این ابزار با عنوان add-ons  که به نام  Firebug مشهور شده بوده است و فایر فاکس پیشنهاد می نماید و دارای قسمتی به نام page speed می باشد و با نشان دادن افت سرعت بار گذاری بهتون کمک می کنه تا مشکل رو پیدا نمایید که میتوند در زیر برای مانیتورینگ سرعت سایت  به ان مراجعه نمایید

ورود به page speed

از همراهیتون با این آموزش وردپرس سپاسگذاریم

منبع : قالب وردپرس

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *