প্যারেন্ট থিমের স্টাইল। CSS এর @ ইমপোর্ট সংস্করণ

Question

প্রসঙ্গ

আমি বিশটি তেরটি ভিত্তিক একটি চাইল্ড থিম তৈরি করেছি যা বেশ ভাল কাজ করে। প্যারেন্ট থিমটি সংস্করণ ১.৩ এ আপডেট করার পরে আমি স্টাইলিংয়ের সাথে এক অদ্ভুত আচরণ লক্ষ্য করেছি যা ক্যাশেড প্যারেন্ট থিমের কারণে হয়েছিল style.css।

এখানে আমার শিশু থিমের বিষয়বস্তু রয়েছে style.css(বাদ দেওয়া শিরোনামগুলি)

/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../twentythirteen/style.css');

সুতরাং চাইল্ড থিমগুলি style.cssপিতামাতার থিমটি আমদানি করা ছাড়া আর কিছুই করে না style.css।

আমার চাইল্ড থিমের কাস্টমাইজেশনগুলির সাথে আমার আরও একটি সিএসএস ফাইল রয়েছে যা আমি এ জাতীয় পছন্দ করি functions.php:

// Enqueue parent theme's style.css (faster than using @import in our style.css)
$themeVersion = wp_get_theme()->get('Version');

// Enqueue child theme customizations
wp_enqueue_style('child_main', get_stylesheet_directory_uri() . '/css/main.css',
    null, $themeVersion);

এটি আমাকে এর মতো একটি দুর্দান্ত সিএসএস ইউআরএল দেয়: domain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1এটি নিশ্চিত করে যে চাইল্ড থিমটি আপডেট করা হলে স্টাইল শিটটি পুনরায় লোড করা হয়েছে।

এখন সমস্যা

বিবৃতিটি @import url('../twentythirteen/style.css');অন্তর্নিহিত প্যারেন্ট থিমের সংস্করণ থেকে সম্পূর্ণ স্বতন্ত্র। আসলে, পিতামাত থিমটি চাইল্ড থিম আপডেট না করে আপডেট করা যেতে পারে তবে ব্রাউজারগুলি এখনও পুরানো সংস্করণের ক্যাশেড সংস্করণ ব্যবহার করবে ../twentythirteen/style.css।

কুড়িটি তেরে প্রাসঙ্গিক কোড যা এটিকে উত্সাহিত করে style.css:

function twentythirteen_scripts_styles() {
    // ...

    // Add Genericons font, used in the main stylesheet.
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.03' );

    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
    // Note usage of get_stylesheet_uri() which actually enqueues child-theme/style.css

    // Loads the Internet Explorer specific stylesheet.
    wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

আমি এই সমস্যাটি সমাধানের কয়েকটি উপায় সম্পর্কে ভাবতে পারি তবে সত্যই সন্তোষজনক নয়:

1. প্রতিবারের সংস্করণটির স্ট্রিং style.css(উদাহরণস্বরূপ @import url('../twentythirteen/style.css?ver=NEW_VERSION');) পরিবর্তন করতে প্যারেন্ট থিম আপডেট করা হলে প্রতিবার আমার শিশু থিমটি আপডেট করুন । এটি পিতা-মাতার থিম সংস্করণ এবং সন্তানের মধ্যে একটি অপ্রয়োজনীয় এবং বিরক্তিকর লিঙ্ক তৈরি করে।

2. আমার সন্তানের মধ্যে functions.php, 1) wp_dequeue_styleঅন্তর্ভুক্ত চাইল্ড থিম style.cssএবং 2) পিতাwp_enqueue_style - মাতার থিমের style.cssসরাসরি সংস্করণ স্ট্রিংয়ের সাথে। এটি প্যারেন্ট থিমটিতে সারিবদ্ধ সিএসএসের ক্রমকে বিভ্রান্ত করে।

3. style_loader_tagউত্সাহিত সিএসএস <link>ট্যাগের জন্য উত্সাহিত সিএসএস ট্যাগটি style.cssসংশোধন করতে এবং সরাসরি সংস্করণ স্ট্রিংয়ের সাথে প্যারেন্ট থিমের style.cssসাথে নির্দেশ করার পথটি পরিবর্তন করতে ফিল্টারটি ব্যবহার করুন । এ জাতীয় সাধারণ প্রয়োজন (ক্যাশে বস্টিং) এর চেয়ে বরং অস্পষ্ট বলে মনে হচ্ছে।

4. style.cssআমার চাইল্ড থিমের মূল পিতা থিমগুলি ডাম্প করুন style.css। (1) হিসাবে একই, তবে কিছুটা দ্রুত।

5. আমার শিশু থিমটিকে style.cssপিতামাতার থিমের একটি সিমিলিংক করুন style.css। এটি বেশ হকিশ বলে মনে হচ্ছে ...

আমি কিছু মিস করেছি? কোন পরামর্শ?

সম্পাদন করা

যোগ করা হয়েছে genericicons.cssএবং ie.cssপিতা বা মাতা থিমে স্টাইল শীট নির্মল কেন আমি পরিবর্তন করতে পারবেন না @importসিএসএস বিবৃতি wp_enqueue_styleআমার সন্তানের থিম হবে। বর্তমানে, @importআমার চাইল্ড থিমের একটি বিবৃতি সহ style.css, উত্পন্ন পৃষ্ঠাগুলিতে আমার এই আদেশ রয়েছে:

1. বিশ শতক / জেনেরিকনস / জেনেরিকনস সিএস -> পিতামাতার থিম দ্বারা সজ্জিত
2. চাইল্ড-থিম / স্টাইল
3. ত্রয়োদশ / সিএসএস / ie.css -> মূল থিম দ্বারা সজ্জিত
4. চাইল্ড-থিম / CSS / main.css -> চাইল্ড থিম দ্বারা সজ্জিত

যদি আমি পিতামাতার style.cssনির্ভরতা হিসাবে সজ্জিত করি তবে এটি main.cssহয়ে যাবে:

1. বিশ শতক / জেনেরিকনস / জেনেরিকনস সিএস -> পিতামাতার থিম দ্বারা সজ্জিত
2. চাইল্ড-থিম / স্টাইল। CSS -> খালি, পিতামাতার থিম দ্বারা সজ্জিত
3. ত্রয়োদশ / সিএসএস / ie.css -> মূল থিম দ্বারা সজ্জিত
4. বিশ / তের / স্টাইল.এসএস -> মেইন সিএসএসের নির্ভরতা হিসাবে শিশু থিম দ্বারা সজ্জিত
5. চাইল্ড-থিম / CSS / main.css -> চাইল্ড থিম দ্বারা সজ্জিত

নোট করুন যে ie.css এখন প্যারেন্ট থিমের আগে অন্তর্ভুক্ত রয়েছে style.css। আমি পিতামাতার থিমের সিএসএস ফাইলগুলির মজাদার ক্রমটি পরিবর্তন করতে চাই না কারণ আমি ধারণা করতে পারি না যে এটি সিএস বিধিগুলির অগ্রাধিকার নিয়ে সমস্যা সৃষ্টি করবে না।

Comments

কখনও ব্যবহার করবেন না @import, পরিবর্তে পিতামাতার থিমের স্টাইলশিটটিকে নিজের স্টাইলশীটের নির্ভরতা হিসাবে সেট করুন ।

— ফুসিয়া

আমি জানি এটি সর্বোত্তম পদ্ধতির নয় তবে এটি এখানে সুপারিশ করা হয়েছে: কোডেক্স.ওয়ার্ডপ্রেস.আর.এইচ বাচ্চা_ধর্ম

— বার্নি

এছাড়াও, আপনি যা পরামর্শ দিয়েছেন তা করা আমার সমস্যার সমাধান করে না। মূল থিম style.cssএখনকার মতো একই জায়গায় অন্তর্ভুক্ত করা হবে না। পিতামাতার মধ্যে অন্যান্য CSS ফাইল অন্তর্ভুক্ত রয়েছে যা অবশ্যই এটির style.cssএবং আমার চাইল্ড থিমের সিএসএসের মধ্যে আসবে ।

— বার্নি

সম্পূর্ণভাবে কোডেক্স উপেক্ষা করুন। এটি ভুল তথ্য দিয়ে পূর্ণ। নির্ভরতা পরামিতি ব্যবহার করে স্টাইলশীটগুলি সঠিক ক্রমে অন্তর্ভুক্ত করা হবে।

— ফুসিয়া

আমার সম্পাদনা দেখুন।

— বার্নি

Answer 1

আপনাকে @ আইপোর্ট ব্যবহার করতে হবে না। আসলে না করাই ভাল। সারিবদ্ধ পদ্ধতির ব্যবহার সম্ভবত চারপাশে আরও ভাল।

বিশটি কোডের সম্পর্কিত অংশটি এখানে:

function twentythirteen_scripts_styles() {
...
    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
...
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

আপনি আপনার কোডে যা করেন তা এখানে:

function child_scripts_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

যদি আপনার মেইন.এস.এস.কে পিতামাতার স্টাইল কোডের পরে আসতে হয় তবে আপনি কেবল এটির উপর নির্ভরশীল করে তোলেন।

এখন, যদি আপনার সন্তানের মধ্যেও একটি বি.এস.এস থাকে, তবে আপনি সেই অনুযায়ী নির্ভরতা সেট আপ করুন:

function child_scripts_styles() {
    wp_enqueue_style( 'child-B-style', get_stylesheet_directory_uri().'/B.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('child-B-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

প্রতিটি আইটেমের জন্য আপনি যে নির্ভরতাগুলি সংজ্ঞায়িত করেছেন তা বাস্তবে সেই নির্ভরতাগুলি কি তা প্রতিফলিত করুন। যদি মেইন.এস.এস.কে অবশ্যই বি.এস.এস এর পরে আসতে হবে, তবে এটি তার উপর নির্ভর করে। যদি বি.এস.এস. অবশ্যই পিতামাতার স্টাইল.কমের পরে আসে তবে বি তার উপর নির্ভর করে। এনকুই সিস্টেমটি এটি আপনার জন্য বাছাই করবে।

এবং যদি আপনি আসলে কিছু জন্য সন্তানের style.css ব্যবহার করছেন না, তাহলে আপনি সব এটা সারিবদ্ধ হবে না । আপনার থিমের শিরোনামের তথ্য রাখা কেবল স্থানধারক হতে পারে। এটি ব্যবহার করছেন না? এটি লোড করবেন না।

এছাড়াও, আপনি ঠিক কী করছেন যা এখানে অর্ডার দেওয়ার উপর নির্ভরশীল? সিএসএস বেশিরভাগ পরিস্থিতিতে লোড অর্ডার সম্পর্কে চিন্তা করে না। সিএসএস নির্বাচকদের নির্দিষ্টতার উপর বেশি নির্ভরশীল। আপনি যদি কোনও কিছুকে ওভাররাইড করতে চান তবে আপনি এর জন্য আপনার নির্বাচককে আরও নির্দিষ্ট করে তুলুন। এটি প্রথমে বা শেষ বা অন্য যে কোনও কিছুতে আসতে পারে, আরও সুনির্দিষ্ট নির্বাচক সর্বদা জয়ী হয়।

সম্পাদন করা

আপনার মন্তব্যগুলি পড়তে এবং কোডটির কাছাকাছি তাকিয়ে আমি দেখতে পেয়েছি যে ভুলটি এখানে। তেইশটি কোডটি "get_stylesheet_uri ()" তৈরি করছে, যা শিশু থিম ক্ষেত্রে আপনার পিতামাতার ফাইল নয়, আপনার চাইল্ড থিমের স্টাইল css ফাইল হবে। এই কারণেই @ ইমপোর্টটি কাজ করে এবং একই ক্রমটি রাখে (যা আবার, আপনার যতটা মনে হয় তা ততটা গুরুত্বপূর্ণ নয়)।

সেক্ষেত্রে আপনি যদি আমদানিটি ব্যবহার করতে না চান তবে আমি পিতামাতার স্টাইল সিএসএস সরাসরি সজ্জিত করার পরামর্শ দেব। তাই ভালো:

function child_scripts_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

চাইল্ড থিমের ফাংশনগুলির কোড.এফপি প্রথমে চলে আসে, তাই আপনার নিজের wp_enqueue_script স্ক্রিপ্টগুলি প্রথমে চলবে এবং এটি প্যারেন্ট থিমের স্টাইল css তৈরি করবে, যা প্যারেন্ট থিম নিজেই করছে না (কারণ এটি আসলে আপনার সন্তানের স্টাইল। CSS সজ্জিত করছে)। এটিকে কোনও কিছুর উপর নির্ভর করে না, পিতামাতার মতোই, তবে এটি আউটপুটে সঠিকভাবে রাখা যায়। নোট করুন যে এই ফাইল এবং জেনেরিকনস.এস.এস. এর ক্রম কোনও বিবেচনা করে না, কারণ মূল "বিশদশ-শৈলীতে" জেনেরিকনস.এস.এস.কে তালিকাভুক্ত নির্ভরতা হিসাবে নেই।

আপনার নিজের সন্তানের স্টাইল.এসএস লোড হবে এবং সত্যই, এখানে আপনার চাইল্ড থিমের জন্য নিজের পরিবর্তনগুলি রাখা উচিত, আলাদা কোনও মেইন সিএসএসে নয়। সেখানে আপনার পরিবর্তনগুলি পরিবর্তন করা থেকে বিরত করার মতো কিছুই নেই, তবে অতিরিক্ত সিএসএস ফাইল রাখার আসল কারণ নেই।

Comments

আমি সম্পূর্ণরূপে সম্মত হই যে @importগুলি সবচেয়ে ভাল উপায় নয়। আরও সুনির্দিষ্ট তথ্যের জন্য দয়া করে আমার "সম্পাদনা" বিভাগটি দেখুন। আমার সিএসএস অর্ডার সংক্রান্ত কোনও বিশেষ চাহিদা নেই। আমি কেবল পিতামাত থিমের সিএসএস ফাইলগুলির অভ্যন্তরীণ ক্রম সংশোধন করতে চাই না যা CSS বিধিগুলির অগ্রাধিকার নিয়ে সমস্যা সৃষ্টি করতে পারে।

— বার্নি

স্পষ্ট করে বলার জন্য, বি.সি.এস (এখন প্রশ্নে আই.এস.এস. তে পরিবর্তিত) আমার শিশু থিমের অংশ নয়, তবে মূলত পিতামাতার থিমেরই অংশ।

— বার্নি

আপনি যদি নিজের স্টাইলটি ie.css স্টাইলের পরে আসতে চান তবে নিজের স্টাইলটি এর উপর নির্ভর করুন। এর নাম "ত্রয়োদশ-তম"। আপনি যে নির্ভরতা ঘোষণা করেন তা দিয়ে অর্ডারটি পুরোপুরি পরিচালিত হয়, তবে আবার সিএসএস দিয়ে ডকুমেন্টে তাদের আসল ক্রমটি সাধারণত কিছু যায় আসে না, তাই আপনি কেন অত্যধিক যত্ন নেবেন তা নিশ্চিত নই।

— অটো

একটি ভিন্ন পদ্ধতির অন্তর্ভুক্ত করার জন্য আমার উত্তর সম্পাদনা করেছে।

— অটো

হ্যাঁ আমি অনুমান করি যে সিএসএসের ক্রম বজায় রাখতে আমি "প্রয়োজন" নিয়ে চলে এসেছি। যদি আদেশটি পিতামাত থিমের জন্য সত্যই গুরুত্বপূর্ণ ছিল তবে তা নির্ভরতাগুলিতে বিবরণ দেওয়া উচিত।

— বার্নি

Answer 2

আমার পূর্ববর্তী উত্তর অত্যধিক জটিল এবং সম্ভাব্য পিতামাতার থিমের নির্ভরতা শৃঙ্খলাটিকে সম্মান করে না (অন্য উত্তরে নোট দেখুন)।

এখানে আরও একটি সহজ সরল পদ্ধতি যা আরও ভালভাবে কাজ করা উচিত:

function use_parent_theme_stylesheet() {
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}

function my_theme_styles() {
    $themeVersion = wp_get_theme()->get('Version');

    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array(), $themeVersion);
}

// Filter get_stylesheet_uri() to return the parent theme's stylesheet 
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');

// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

get_stylesheet_uri()চাইল্ড থিমের পরিবর্তে নিজস্ব স্টাইলশীটটি ফিরিয়ে আনার জন্য এই ধারণাটি কেবল প্যারেন্ট থিমে কল করতে হয়। চাইল্ড থিমের স্টাইলশিটটি পরে অ্যাকশন হুকের পরে তৈরি করা হয় my_theme_styles।

Comments

কেবলমাত্র রেকর্ডের জন্য: 1) আপনার কোডটি পুরানো @importসংস্করণটি ব্যবহার করার মতো সঠিক HTML তৈরি করবে , কার্য সম্পাদনের উপর কোনও প্রভাব ফেলবে না, সার্ভারের জন্য দুটি পৃথক স্টাইল। CSS অনুরোধ থাকবে 2) এই উত্তরটি পুরো নির্ভরতার জিনিসটি ফেলে দেয় একসাথে ... 3) আপনি এখানে যা করছেন get_template_directory_uriএবং get_template_stylesheet_uriকী করছেন তা পরীক্ষা করতে পারেন : core.trac.wordpress.org/browser/tags/4.8/src/wp-includes/… আবারও, সেই কোডটির বেশিরভাগের প্রয়োজন নেই।

— বিজি

@ বিজি 17 ওয়া থিমের সংস্করণের উপর ভিত্তি করে wp_enqueue_styleস্বয়ংক্রিয়ভাবে ইউআরএল তৈরি করে (উদাহরণস্বরূপ ?ver=2013-07-18) ক্যাশে বস্টিং কোয়েরি স্ট্রিং যুক্ত করে । এটি একটি @importবিবৃতি দ্বারা করা হয়নি ।

— বার্নি

Answer 3

সাবধানবাণী

এই সমাধানটি পিতামাতার থিমের নির্ভরতা সম্মান করে না ! পিতামাতার থিমের হ্যান্ডেলের নাম পরিবর্তন করা পিতা-মাতার থিমে নির্ধারিত নির্ভরতার শৃঙ্খলকে প্রভাবিত করে। আমার আরও সহজ উত্তর দেখুন ।

মূল উত্তর

যদিও অট্টোর উত্তরটি বেশ ভাল, আমি আমার চাইল্ড থিমের ফাংশন.এফপিতে এটি শেষ করেছি

function my_theme_styles() {
    global $wp_styles;
    $parentOriginalHandle = 'twentythirteen-style';
    $parentNewHandle = 'parent-style';

    // Deregister our style.css which was enqueued by the parent theme; we want
    // to control the versioning ourself.
    $parentStyleVersion = $wp_styles->registered[$parentOriginalHandle]->ver;
    $parentDeps = $wp_styles->registered[$parentOriginalHandle]->deps;
    wp_deregister_style($parentOriginalHandle);

    // Enqueue the parent theme's style.css with whatever version it used instead
    // of @import-ing it in the child theme's style.css
    wp_register_style($parentNewHandle, get_template_directory_uri() . '/style.css',
        $parentDeps, $parentStyleVersion);

    // Enqueue our style.css with our own version
    $themeVersion = wp_get_theme()->get('Version');
    wp_enqueue_style($parentOriginalHandle, get_stylesheet_directory_uri() . '/style.css',
        [$parentNewHandle], $themeVersion);
}

// Run this action action the parent theme has enqueued its styles.
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

style.cssচাইল্ড থিমের সংস্করণটি নিয়ন্ত্রণ করার সময় এটি পিতামাতার থিমের ক্রম এবং সংস্করণ নম্বরগুলি বজায় রাখে style.css।

Comments

এটি আমার মনের কথা ভঙ্গ করে যে সর্বাধিক জনপ্রিয় ব্লগ সফ্টওয়্যারটিতে বিদ্যমান থিমের সিএসএস টুইঙ্ক করার জন্য 20+ লাইন কোডের প্রয়োজন। আমার ধারণা এই চাকরির সুরক্ষা।

— কার্ল জি

আমাকে পরিবর্তন [$parentNewHandle]করতে হয়েছিলarray($parentNewHandle)

— কার্ল জি

@ কার্লজি: আমি ব্যবহৃত অ্যারে সিনট্যাক্স (বন্ধনীগুলি) পিএইচপি 5.4-এ প্রবর্তিত হয়েছিল।

— বার্নি

প্রচারকারীদের কাছে: দয়া করে আমার অন্য উত্তরটি দেখুন যা এটির সাথে সমস্যার সমাধান করে।

— বার্নি

এটি সমস্ত বিশাল ভুল বোঝাবুঝি, এর কোনওটির প্রয়োজন নেই। আসলে, পুরানো @importপদ্ধতিটি ঠিক পাশাপাশি কাজ করে, দয়া করে উভয় পদ্ধতির তুলনা করুন। পিতা-মাতার থিমের চাইল্ড থিমের নির্ভরতা হিসাবে, এটির কোনও দরকার নেই। style.cssকমপক্ষে আমার পরীক্ষাগুলি থেকে শিশু সবসময় পিতামাতার পরে বোঝাই হয়। ভুল প্রমাণিত হতে ভালবাসা।

— বিজি 17aw 22