لوگوی SVG روی وردپرس

لوگوی SVG در وردپرس

Web

برای این که بتوانیم لوگویی با پسوند SVG روی قالب وردپرس آپلود کنیم چه باید کرد؟

قبل از این که لوگوی SVG در وردپرس را بررسی کنیم باید بدانیم فایل SVG چیست؟
اگر با مفهوم بردار یا همان وکتور آشنا نیستید در ابتدا به مقاله وکتور چیست؟ مراجعه کنید. SVG در واقع مخفف کلمه Scalable Vector Graphic هست. معنی پارسی آن می شود : گرافیک برداری با قابلیت تغییر اندازه. در دنیای وب اگر به جای فایل های بیت مپ مانند .Jpg از این نوع فایل یعنی SVG استفاده کنید معایب و مزایایی دارد. حال به شرح این معایب و مزایا می پردازیم.

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

از آنجایی که هنوز پلتفرمی مانند وردپرس این نوع فایل را پشتیبانی نمی کند و پیغام غیر ایمن بودن این فایل را میدهد. چاره کار اینست که بصورت دستی و با کدهای PHP این فایل را به وردپرس معرفی کرد. برای این منظور باید تغییراتی در فایل Functions.php وارد کنید.

چگونه وردپرس SVG را پشتیبانی می کند.

برای این منظور به File manager مسیر زیر در cpanel بروید:

public_html/wp-content/themes/yourtheme/functions.php

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

// SVG for wordpress .
require get_stylesheet_directory ( ) .
‘/inc/widgets/cv-slider.php’; // CV: Slider
function cc_mime_types ( $mimes ) {
$mimes[‘svg’] = ‘image/svg+xml’; return $mimes;
}
add_filter ( ‘upload_mimes’ , ‘cc_mime_types’ ) ;

فایل را ذخیره کنید. اکنون می توانید فایل های با پسوند .svg را مانند تصاویر دیگر آپلود کنید و در وبسایت وردپرسی خود استفاده کنید.

چگونه لوگوی وبسایت وردپرس را با فایل svg جایگزین کنیم:

یکی از اساسی ترین مشکلی که در حین آپلود کردن لوگوی svg خواهید داشت این است که این کار را باید از بخش سفارشی سازی یا همان customizing انجام دهیم. مشکل اینجاست که این بخش به طور پیش فرض در صدد است تا شما تصویر معرفی شده را به اصطلاح برش بزنید همان Cropp. اما این کار روی فایل های svg قابل انجام نیست و وردپرس خطا می دهد. برای رفع این مشکل باید با وارد کردن یک خط دستور به فایل function.php دکمه ای کنار Cropp image فعال کنیم به نام skip cropping. یعنی وردپرس بی خیال برش لوگو شود و فایل را هر چه هست بپذیرد. برای این کار به مسیر زیر بروید و مجموعه کدهای زیر را بیابید و خط ششم را به آن اضافه کنید:

public_html/wp-content/themes/yourtheme/functions.php

//Add theme support for Custom Logo.
add_theme_support( 'custom-logo', array(
    'width'       => 300,
    'height'      => 45,
    'flex-width'  => true,
    'flex-height' => true,
) );

در ادامه کد های زیر را در فایل function.php وارد کنید و به جای your home page address آدرس صفحه اصلی سایت خود را قرار دهید :

/** SVG Logo/ require get_stylesheet_directory() .
'/inc/widgets/cv-slider.php';
// CV: Slider function cc_mime_types($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types'); /*
Change the custom logo URL
*/
function my_custom_logo_link() {
// The logo
$custom_logo_id = get_theme_mod( 'custom_logo' );
// If has logo
if ( $custom_logo_id ) {
// Attr $custom_logo_attr = array( 'class' => 'custom-logo', 'itemprop' => 'logo', );
// Image alt $image_alt = get_post_meta( $custom_logo_id, '_wp_attachment_image_alt', true );
if ( empty( $image_alt ) ) { $custom_logo_attr['alt'] = get_bloginfo( 'name', 'display' );
}
// Get the image $html = sprintf(
 '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
esc_url( 'your home page address' ),
 wp_get_attachment_image( $custom_logo_id, 'full', false, $custom_logo_attr ) );
}
// Return
return $html;
}
add_filter( 'get_custom_logo', 'my_custom_logo_link' );

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

img[src$=“.svg”] { width: 100%; height: auto; }

مقالات مرتبط

اشتراک این مطلب

دیدگاهتان را بنویسید

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