अगर आप wordpress यूज करते हैं और फ्री की थीम इंस्टॉल करते हैं और उसके अंदर आप कस्टमाइज करने में सक्षम नहीं हो पाते हैं तो आपके लिए यह सुविधा वर्डप्रेस ने बहुत ही अच्छे से सुलभ कराई है अगर आपको इस प्रकार की जानकारी है तो आप पेड थीम की तरह अपनी टीम को कस्टमाइज कर सकते हैं और उसका भरपूर फायदा उठा सकते हैं इसके लिए आपको निम्न प्रकार की जानकारी होना आवश्यक है।
सबसे पहले चाइल्ड थीम बनाए चाइल्ड थीम के अंदर दो फोल्डर बनाए जिसमें एक स्टाइलिश सीएस एस दुसरा फंग्शन पीएच पी। स्टाइलिश सीएस एस के अंदर निम्न प्रकार के कोड डाले. नीचे देख एक और उदाहरण मात्र है आप अपनी टीम के नाम के हिसाब से इसे कस्टमाइज कर सकते हैं।
/*
Theme Name: welldone mart Child
Theme URI: https://welldonemart.com/
Description: welldone mart online store
Author: mamntraj
Author URI: https://welldonemart.com/
Template: storefront
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: storefrontchild
*/
.फंक्शन पीएचपी फाइल के अंदर निम्न कोड डालें।
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style'; // This is 'welldonemart-style' for the welldonemart theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // welldonemart
$theme->parent()->get('Version')<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style'; // This is 'welldonemart-style' for the welldonemart theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // welldonemart
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // welldonemart
);
}
/*
*
);
इस तरह दो फाइलें बनाने के बाद आपकी चाइल्ड थीम कंप्लीट हो जाएगी और इसको आप कस्टमाइज करने के लिए उपयोग कर सकते हैं।
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // welldonemart
);
}
/*
*
कंपनी लोगों की साइज छोटी और बड़ी करने के लिए निम्न कोड डालें।
.site-header .site-logo-anchor img, .site-header .site-logo-link img, .site-header .custom-logo-link img {
width: 100%;
max-width: 150px;
}
हेडिंग फर्स्ट हेडिंग सेकंड हेडिंग कि साइज छोटी बड़ी करने के लिए निम्न कोड का उपयोग करें।
h1, .alpha {
font-size: 1.917924em;
line-height: 1.214;
letter-spacing: -1px;
}
h2, .beta {
font-size: 1.5em;
line-height: 1.214;
}
.onsale {
background-color: #1780d1;
border-color: #ffffff;
color: #ffffff;
}
.wc-block-grid__product-onsale, .onsale {
border-radius: 8px;
}
रेटिंग का कलर चेंज करने के लिए निम्न कोड का उपयोग करें।
.star-rating span:before, .quantity .plus, .quantity .minus, p.stars a:hover:after, p.stars a:after, .star-rating span:before, #payment .payment_methods li input[type=radio]:first-child:checked+label:before {
color: #f5a004;
}
प्रोडक्ट के नीचे मेटा को छुपाने के लिए निम्न कोड का उपयोग करें।
.product_meta {
display: none; !important
}
.Woocommerce में केटेगरी के अंदर प्रोडक्ट की संख्या छुपाने के लिए निम्न सीएसएस का उपयोग करें।
.archive.woocommerce mark.count {
display:none;
}
ul.products li.product {
width:46.411765%;
float:left;
margin-right: 5.8823529412%;
}
ul.products li.product:nth-of-type( 2n ) {
margin-right:0;
}
a {
text-decoration: none !important;
}
@media only screen and (min-width:768px) {
ul.products li.product:nth-of-type( 2n ) {
margin-right:5.8823529412%;
}
}
.site-header {
padding-top:1em;
}
Breadcrumb छुपाने के लिए निम्न कोड का उपयोग करें
.woocommerce-breadcrumb {
font-size: .0;
}
#page .site-header {
margin-bottom: 0em;
}
ul.wp-block-jetpack-slideshow_swiper-wrapper.swiper-wrapper {
height: fit-content !important;
}
input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], textarea, .input-text {
color: #717274;
border: 1;
box-shadow: inset 0 1px 2px rgb(0 0 0 / 19%);
}
स्टोरफ्रंट थीम में फुटर कार्ट का कलर वह साइज चेंज करने के लिए निम्न कोर्ट का उपयोग करें।
.storefront-handheld-footer-bar ul li.cart .count {
background-color: #1780d1;
color: #f7f9ff;
border-color: #f7f9ff;
}
हेडर के अंदर सर्च बॉक्स की साइट छोटी बड़ी करने के लिए निम्न कोड का उपयोग करें।
.woocommerce-active .site-header .site-search {
width: 30.739%;
}
कैडर के अंदर कार्ड की साइड छोटी बड़ी करने के लिए निम्न सीएसएस का उपयोग करें।
.site-header-cart .cart-contents {
font-size:17px;
}
नेवीगेशन मेनू की साइज छोटी बड़ी करने के लिए निम्न को विशेष का उपयोग करें
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
font-size:17px;
}
हैडर के टॉप में साइज को कस्टमाइज करने के लिए निम्न सीएसएस उपयोग करें।
.header-content-top {
height: 30px;
width: 100%;
color: #07a513;
}
.header-widget-region .widget {
margin: 0;
padding: 0em 0;
font-size: .8em;
}
.buy now बटन लगाने के लिए नया फंक्शन जोड़ें।
function add_content_after_addtocart() {
$current_product_id = get_the_ID();
$product = wc_get_product( $current_product_id );
$checkout_url = WC()->cart->get_checkout_url();
if( $product->is_type( 'variable' ) ){
echo '<div class="clear-sec">';
echo '</div>';
echo '<a href="'.$checkout_url.'?add-to-cart='.$current_product_id.'" class="buy-now button">Buy Now</a>';
}
}
add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );
.Buy now बटन को कस्टमाइज करने के लिए निम्न css कोड का उपयोग करें।
buy-now.button {
max-width: 200px;
text-align: center;
background: #ffa500 !important;
color: #fff !important;
font-weight: bold !important;
}
स्टोरफ्रंट थीम में फूट मेनु को छुपाने के लिए इस कोड का उपयोग करें।
add_action( 'init', 'jk_remove_storefront_handheld_footer_bar' );
function jk_remove_storefront_handheld_footer_bar() {
remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );
}
संदेश
0 टिप्पणियाँ
Thank you very much