সিডিএন ব্যর্থ হলে ফন্ট আশ্চর্যর জন্য স্থানীয় ফ্যালব্যাক কীভাবে সরবরাহ করবেন?

আমি একটি ওয়ার্ডপ্রেস থিম বিকাশ করার চেষ্টা করছি এবং সিডিএন যদি ব্যর্থ হয় বা আমি ইন্টারনেট সংযোগ ছাড়াই স্থানীয় সার্ভারে আমার থিমটি বিকাশ করি তবে কীভাবে ফন্ট আশ্চর্যের জন্য স্থানীয় ফ্যালব্যাক সরবরাহ করবেন তা নির্ধারণ করার চেষ্টা করছি।

আমার মনে যে সমাধানটি রয়েছে তা হ'ল এর মতো কিছু (সিউডো কোড):

if ( $CDN_IS_AVAILABLE ) { 
        wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', false );
    } else {
        wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css', false, '4.0.3' );
    }

ধন্যবাদ!

cdn

— নট
সূত্র

@ অ্যালেক্সান কি হবে is_readable($cdnPath)?

— মায়নুল ইসলাম

ধন্যবাদ @ মায়নুলআইসলাম তবে এটি সিডিএন পাওয়া গেলেও এটি মিথ্যা প্রত্যাবর্তন বলে মনে হচ্ছে।

— নট

অন্তত- কয়েকটি উপায় রয়েছে, তবে সিডিএন ব্যবহারের একমাত্র কারণ হ'ল পারফরম্যান্স, তবে আমি নিশ্চিত যে আপনি যে কোনও উপায়ে খুঁজে পাবেন পারফরম্যান্সকে আরও খারাপ করে দেবে, তাই ইমো কোনও অর্থহীন নয়। থিম যদি ভাগ করে নেওয়ার / বিক্রয় করার জন্য হয় তবে আমি কেবল স্থানীয় অনুলিপিটিই যাব, ব্যবহারকারীরা সিডিএন সংস্করণে স্যুইচ করার সহজ উপায় রাখার বিষয়ে নিশ্চিত হয়ে, যদি তারা পছন্দ করে। থিম যদি কেবল নিজের জন্য থাকে তবে এক বা অন্যটি বেছে নিন। বিবেচনা করুন যে সর্বাধিক বিখ্যাত সিডিএনগুলির ডাউন ডাউন সময়ের খুব কম% থাকে (এবং সিডিএনপারফ.কম অনুসারে বুটস্ট্র্যাপসিডিএন অন্যতম নির্ভরযোগ্য ))

— গাজাজ্যাপ

আপনার কী জেনারিক ধারণা আছে কীভাবে প্রারম্ভিকদের ফ্যালব্যাক পরিচালনা করবেন? আমি জানি যে জেএস ফলব্যাকগুলি ভেরিয়েবলগুলি পরীক্ষা করার উপর নির্ভর করে, আমি সিএসএস লোড চেক করে কী নির্ভর করব তা নিশ্চিত নই।

— রাস্ট 16

অবশ্যই আপনি কি করেন, আমি পিএইচপি এর জন্য কখনও অতিরিক্ত অনুরোধ করব না। এটাই এখানে চ্যালেঞ্জ - আরম্ভকারীদের জন্য আমি সিএসএস লোডের জন্য যাচাই করার ভাল উপায়টি ভাবতে পারি না।

— রাস্ট 17

উত্তর:

সমস্যাটি হ'ল আমি নিশ্চিত যে পিএইচপি এর মাধ্যমে কোনও পৃষ্ঠায় সিএসএস কার্যকরভাবে যুক্ত করা হয়েছে কিনা তা যাচাই করা অসম্ভব : আমি সিএসএস ব্রাউজার দ্বারা পার্স করা হয়, তাই ক্লায়েন্ট সাইড, এবং সার্ভার সাইডে সম্পূর্ণরূপে প্রভাব ফেলে না।

অবশ্যই, পিএইচপিতে সিডিএন প্রতিক্রিয়াশীল কিনা তা পরীক্ষা করা সম্ভব ...

বিকল্প 1

একটি অনুরোধ প্রেরণ করুন এবং যদি এটি HTTP স্থিতি 200 এর সাথে সাড়া দেয় তবে এটি ব্যবহার করুন। কিছুটা এইরকম:

function font_awesome_css() {
    $url = 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css';
    $cdn = wp_remote_get( $url );
    if ( (int) wp_remote_retrieve_response_code( $cdn) !== 200 ) {
        $url = get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css';
    }
    wp_enqueue_style( 'font-awesome', $url, false );
}

এর ফলে 2 টি এইচটিপি অনুরোধের ফলাফল হয়, একটি চেকের জন্য, দ্বিতীয় এমবেডড সিএসএসের জন্য: সত্যই খারাপ ।

বিকল্প 2

function font_awesome_css() {
    $url = 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css';
    $cdn = wp_remote_get( $url );
    if ( (int) wp_remote_retrieve_response_code( $cdn ) === 200 ) {
        $css = wp_remote_retrieve_body( $cdn );
        add_action( 'wp_head', function() use( $css ) {
            $absolute = "//netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/";
            $css = str_replace( "../fonts/", $absolute, $css );
            echo '<style type="text/css">' . $css . '</style>';
        } );
    } else {
        $url = get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css';
        wp_enqueue_style( 'font-awesome', $url, false );
    }
}

এটি আরও খারাপ :

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

সুতরাং, সত্যিই, বাড়িতে এটি করবেন না ।

সত্যিকার অর্থে গুরুত্বপূর্ণ হ'ল পিএইচপি ব্যবহার করে আপনি সিডিএন অনুরোধটি পরীক্ষা করতে পারেন তবে সিএসএস যাচাই করতে পারবেন না, সুতরাং আপনার সমস্ত প্রচেষ্টা আরও ভাল পরিবর্তে খারাপ কর্মক্ষেত্রে শেষ হয়।

আন্তরিকভাবে, যদি আপনার পাবলিক থিম হয় তবে আমি আপনাকে স্থানীয় কপিটি ব্যবহার করার পরামর্শ দিচ্ছি, যা ব্যবহারকারীদের সিডিএন চয়ন করার উপায় সরবরাহ করে:

if ( ! function_exists( 'font_awesome_css' ) ) {
    function font_awesome_css() {
        $_url = get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css';
        $url = apply_filters( 'font_awesome_css_url', $_url );
        wp_enqueue_style( 'font-awesome', $url, false );
    }
}

সুতরাং ব্যবহারকারীরা চাইল্ড থিম ব্যবহার করে ফাংশনটি সম্পূর্ণরূপে ওভাররাইড করতে পারেন এবং 'font_awesome css_url'ইউআরএল পরিবর্তন করতে ফিল্টারটিও ব্যবহার করতে পারেন ।

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

থিমটি যদি নিজের জন্য হয় তবে একটি পছন্দ করুন। বিবেচনা করুন যে সর্বাধিক বিখ্যাত সিডিএনগুলির ডাউন ডাউন সময়ের খুব কম% থাকে (এবং সিডিএনপারফ.কম অনুসারে বুটস্ট্র্যাপসিডিএন অন্যতম নির্ভরযোগ্য )) আমি নিশ্চিত যে আপনার হোস্টিংয়ের বুটস্ট্র্যাপসিডিএন-এর চেয়ে ডাউনটাইম% বেশি রয়েছে, তাই লোকেরা আপনার সাইটটি ভাঙা আইকনগুলির সাহায্যে দেখার চেয়ে বেশি দেখার সম্ভাবনা বেশি।

নোংরা উপায়

যেমনটি বলা হয়েছে, পিএইচপি সিএসএস চেক করতে পারে না, কারণ সিএসএস রেন্ডারিংয়ের ফলে ক্লায়েন্ট সাইড হয় তবে আপনি ক্লায়েন্ট সাইড চেক: জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।

সিডিএন ব্যবহার করে প্রথম এম্বেড সিএসএস:

function font_awesome_css() {
    $url =  '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css';
    wp_enqueue_style( 'font-awesome', $url, false );
}

এর পরে, আপনার পাদচরণে কিছু জাভাস্ক্রিপ্ট যুক্ত করুন:

/*
Normally the JS should be properly enqueued and the URL
passed via wp_enqueue_script, but this is a proof of concept,
more than real code.
*/
add_action( 'wp_footer', function() {
    $cssurl = get_template_directory_uri() . '/css/';
    ?>
    <span id="facheck" data-cssuri="<?php echo $cssurl; ?>" class="fa" style="display:none">
    </span>
    <script>
        jQuery(document).ready(function($) {
            var $check = $('#facheck');
            if ( $check.css('fontFamily') !== 'FontAwesome' ) {
                // Font Awesome not loaded!
                // Remove current CSS link
                $('#font-awesome-css').remove;
                // Add the local version
                var local = '<link rel="stylesheet" type="text/css" href="' +
                    $check.data('cssuri') + // This is the theme CSS folder URL
                    'font-awesome/css/font-awesome.min.css" />';
                $('head').append( local );
            }
        });
    </script>
    <?php
});

পৃষ্ঠাটি লোড হওয়ার সাথে সাথে এই কোডটি চলে এবং 'ফা' শ্রেণীর সাথে পাদলে অদৃশ্য স্প্যান যুক্ত হলে ফন্ট-পরিবার সম্পত্তি 'ফন্টআউবিজ' তে সেট করা আছে কিনা তা পরীক্ষা করে। এটি হ'ল ফন্ট অসাধারণ দ্বারা সেট করা হয়েছে, সুতরাং এটি সত্য না হলে এর অর্থ সিএসএস লোড হয় না। যদি এটি ঘটে থাকে তবে কোডটি জাভাস্ক্রিপ্ট ব্যবহার করে স্থানীয় সিএসএসের শীর্ষস্থানীয় হতে পারে।

(এই কোডটি পরীক্ষা করতে আপনি wp_enqueue_styleএকটি ভুল সিডিএন URL- এর মাধ্যমে এম্বেড করতে পারেন এবং দেখুন কী ঘটে)

সুতরাং, বিরল ক্ষেত্রে সিডিএন উপলভ্য নয়, সমস্ত শৈলী প্রত্যাশিত হিসাবে প্রদর্শিত হবে (কিছু মিলিসেকেন্ডের জন্য ব্যবহারকারীরা 'ভাঙা' সিএসএস আইকন দেখতে পাবেন, কারণ পৃষ্ঠা লোডের পরে সিএসএস যুক্ত করা হয়েছে)।

এখন, সিডিএনগুলি খুব নির্ভরযোগ্য হিসাবে বিবেচনা করে, ভাঙা আইকনগুলি দেখতে পাবে <1% লোকের জন্য এই হ্যাক করা কি উপযুক্ত? এই প্রশ্নের উত্তর দেওয়া আপনার কাছে বাকি।

— গাজাজাপ
সূত্র

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

— নট

আমি দীর্ঘদিন ধরে এর মতো সমাধানের সন্ধান করছি, সুতরাং শেষ বাক্যটি সম্পর্কে যা জিজ্ঞাসা করে যে "ভাঙা আইকনগুলি দেখতে পাবে <1% লোকের জন্য এই হ্যাক করা কি উপযুক্ত?" সম্ভবত একটি লোডিং স্পিনার যোগ করার কাজ হবে?

— কার্ল আলবার্তো

কোনও সার্ভার-সাইড চেক বুলেট-প্রুফ নয়। যদি আপনার সার্ভার ক্যালিফোর্নিয়ায় অবস্থিত থাকে তবে আপনার চেকটি ক্যালিফোর্নিয়া সিডিএন এর ডেটা সেন্টার ব্যবহার করবে। আপনার ব্যবহারকারী যদি চিনে অবস্থিত থাকে তবে তারা সম্ভবত সম্পূর্ণ ভিন্ন ডেটা কেন্দ্র ব্যবহার করবে। কমপক্ষে, আমি এটি কাজ করে বলে মনে করি।

যাইহোক, এখানে একটি উন্নত jquery সমাধান:

http://jsfiddle.net/skibulk/fp1gqnyc/

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
    (function($){
        var $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
        if ($span.css('fontFamily') !== 'FontAwesome' ) {
            // Fallback Link
            $('head').append('<link href="/wordpress//css/font-awesome.min.css" rel="stylesheet">');
        }
        $span.remove();
    })(jQuery);
</script>

— skibulk
সূত্র

উজ্জ্বল, এবং ফন্ট-দুর্দান্ত থেকে অনেক বেশি একটি বৈধ পদ্ধতির, ভাগ করে নেওয়ার জন্য ধন্যবাদ। উদাহরণস্বরূপ, এখানে এবং অন্য কোথাও অন্য সমাধানগুলির থেকে আলাদা হিসাবে আমারও অ্যাজন্যস্টিক যুক্ত হওয়া উচিত।

— আউসিল

যেহেতু সময়সীমা শেষ নেই, সিডিএন উদাহরণটি চেক করার পরে লোড করা শেষ হলে এটি দু'বার ফন্ট অসাধারণ লোডিংয়ের সমাপ্ত হবে fontFamily।

— ড্যান ড্যাসক্লেস্কু

@ ড্যানডাসকলেসকু সিএসএস ফাইলগুলি কি ডিফল্টরূপে সিঙ্ক্রোনাসভাবে (ব্লক করা) লোড করা যায় না? আমার বিশ্বাস সিডিএন লোড হওয়া বা ব্যর্থ না হওয়া পর্যন্ত পৃষ্ঠাটি চলতে থাকবে না?

— skibulk

সিএসএস সিঙ্ক্রোনালি লোড করে তবে এটি ব্যবহার করে পাঠ্য রেন্ডার করলেই ফন্টটি স্বয়ংক্রিয়ভাবে লোড হয়। এখানে একটি জেএসবিন এটি দেখায় ।

— ড্যান ড্যাসক্লেস্কু