এটি কি বাহ্যিক চিত্র URL সহ একটি বৈশিষ্ট্যযুক্ত চিত্র সেট করা সম্ভব?


20

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


আপনি এটি কোনও কাস্টম ফিল্ডের সাথে করতে পারেন যেখানে আপনি বাহ্যিক চিত্রের URL টি সঞ্চয় করেন। এটি প্রতিবার the_post_thumnail()উপস্থিত (বা অনুরূপ ফাংশন) উপস্থিত থাকা বা থিম বা প্লাগইন দ্বারা সংজ্ঞায়িত বিভিন্ন চিত্রের মাপের সাথে এটির কাজ করা কঠিন হতে পারে ।
সাইবমেটা

1
আপনি এই বৈশিষ্ট্যযুক্ত চিত্র হিসাবে বাহ্যিক চিত্র url সেট করতে আপনি এই প্লাগইনটি ব্যবহার করতে পারেন: wordpress.org/plugins/wp-remote-thumbnail
অ্যাডভান্সড এসইও

এটি স্থানীয়ভাবে চিত্র সঞ্চয় করে বা দূরবর্তীভাবে কল করে?
ভোল্টিল 3

@ ভোলিটিল 3 আমি পরীক্ষা করে দেখিনি তবে প্লাগইন বিবরণটি পড়তে আমি বলব এটি একে দূরবর্তীভাবে বলে।
অ্যান্ডি ম্যাকোলে-ব্রুক

উত্তর:


35

হ্যাঁ, এটি সম্ভব এবং বেশ সহজ।

এটি আমার প্রস্তাবিত কর্মপ্রবাহ:

  1. বৈশিষ্ট্যযুক্ত চিত্রটির URL sertোকাতে কোথাও একটি ইউআই রাখুন। 'admin_post_thumbnail_html'ফিল্টার হুক ব্যবহার করা সম্ভবত সেরা পছন্দ
  2. 'save_post'কাস্টম পোস্ট মেটাতে ইউআরএল (সুরক্ষা এবং বৈধতা রুটিনের পরে) সংরক্ষণ করতে অ্যাকশন হুক ব্যবহার করুন
  3. ওভাররাইডিং ডিফল্টকে 'post_thumbnail_html'সঠিক <img>মার্কআপ আউটপুট করতে ফিল্টার হুক ব্যবহার করুন , যদি পোস্টের জন্য বৈশিষ্ট্যযুক্ত চিত্রটির বাহ্যিক বৈশিষ্ট্যযুক্ত চিত্রের সাথে পোস্ট মেটা থাকে

কাজ করার জন্য, এই কর্মপ্রবাহটির বৈশিষ্ট্যযুক্ত চিত্রটি টেমপ্লেটে get_the_post_thumnbail()বা the_post_thumbnail()ফাংশনগুলি ব্যবহার করে দেখানো দরকার ।

তদুপরি, আমাদের অবশ্যই নিশ্চিত থাকতে হবে যে '_thumbnail_id'আমরা বাহ্যিক ইউআরএল-এর জন্য মেটা সেট করার সময় মেটা মানটির একটি শূন্যস্থান নেই, অন্যথায় has_post_thumbnail()কেবলমাত্র একটি বাহ্যিক বৈশিষ্ট্যযুক্ত চিত্র রয়েছে এমন পোস্টগুলির জন্য মিথ্যা ফিরিয়ে দেবে।

আসলে, এটি সম্ভব যে কোনও পোস্টে আমাদের স্ট্যান্ডার্ড স্থানীয় বৈশিষ্ট্যযুক্ত চিত্র এবং আমাদের কর্মপ্রবাহের মাধ্যমে একটি সেট উভয়ই থাকে এবং এই ক্ষেত্রে বাহ্যিকটি ব্যবহৃত হবে।

আমাদের ওয়ার্কফ্লো বাস্তবায়নের জন্য আমাদের বাহ্যিক বৈশিষ্ট্যযুক্ত চিত্র হিসাবে ব্যবহৃত ইউআরএলকে বৈধতা দেওয়ার জন্য একটি ফাংশন প্রয়োজন, কারণ আমাদের নিশ্চিত হতে হবে যে এটি একটি বৈধ চিত্রের URL URL

এই কাজটি করার বিভিন্ন উপায় রয়েছে; এখানে আমি একটি খুব সহজ উপায় ব্যবহার করেছি যা চিত্রটি ডাউনলোড না করেই কেবল URL টি দেখায়। এটি কেবল স্থির চিত্রের URL- এর জন্য কাজ করে এবং চিত্রটি আসলে বিদ্যমান তা যাচাই করে না তবে এটি দ্রুত। আপনার প্রয়োজন হলে এটিকে আরও উন্নত কিছুতে সংশোধন করুন ( এখানে কিছু সহায়তা দেওয়া হল)।

function url_is_image( $url ) {
    if ( ! filter_var( $url, FILTER_VALIDATE_URL ) ) {
        return FALSE;
    }
    $ext = array( 'jpeg', 'jpg', 'gif', 'png' );
    $info = (array) pathinfo( parse_url( $url, PHP_URL_PATH ) );
    return isset( $info['extension'] )
        && in_array( strtolower( $info['extension'] ), $ext, TRUE );
}

বেশ সহজ. এবার উপরের কর্মপ্রবাহে বর্ণিত 3 টি হুক যুক্ত করুন:

add_filter( 'admin_post_thumbnail_html', 'thumbnail_url_field' );

add_action( 'save_post', 'thumbnail_url_field_save', 10, 2 );

add_filter( 'post_thumbnail_html', 'thumbnail_external_replace', 10, PHP_INT_MAX );

এবং সম্পর্কিত ফাংশন। অ্যাডমিনে ক্ষেত্রের আউটপুট দেয় এমন প্রথমটি:

function thumbnail_url_field( $html ) {
    global $post;
    $value = get_post_meta( $post->ID, '_thumbnail_ext_url', TRUE ) ? : "";
    $nonce = wp_create_nonce( 'thumbnail_ext_url_' . $post->ID . get_current_blog_id() );
    $html .= '<input type="hidden" name="thumbnail_ext_url_nonce" value="' 
        . esc_attr( $nonce ) . '">';
    $html .= '<div><p>' . __('Or', 'txtdomain') . '</p>';
    $html .= '<p>' . __( 'Enter the url for external image', 'txtdomain' ) . '</p>';
    $html .= '<p><input type="url" name="thumbnail_ext_url" value="' . $value . '"></p>';
    if ( ! empty($value) && url_is_image( $value ) ) {
        $html .= '<p><img style="max-width:150px;height:auto;" src="' 
            . esc_url($value) . '"></p>';
        $html .= '<p>' . __( 'Leave url blank to remove.', 'txtdomain' ) . '</p>';
    }
    $html .= '</div>';
    return $html;
}

মনে রাখবেন যে আমি 'txtdomain'পাঠ্য ডোমেন হিসাবে ব্যবহার করেছি তবে আপনার একটি সঠিক, নিবন্ধিত পাঠ্য ডোমেন ব্যবহার করা উচিত।

খালি হলে আউটপুটটি এইভাবে দেখায়:

বৈশিষ্ট্যযুক্ত চিত্রের জন্য বাহ্যিক URL: ক্ষেত্র

এবং চিত্র চিত্রটি ইউআরএল যুক্ত করার পরে এবং পোস্টটি সংরক্ষণ / আপডেট করার পরে এটি দেখতে কেমন লাগে:

বৈশিষ্ট্যযুক্ত চিত্রের জন্য বাহ্যিক ইউআরএল: ফিল্ড পূরণ এবং সংরক্ষণের পরে

সুতরাং, এখন আমাদের অ্যাডমিন ইউআই সম্পন্ন হয়েছে, আসুন সংরক্ষণের রুটিনটি লিখুন:

function thumbnail_url_field_save( $pid, $post ) {
    $cap = $post->post_type === 'page' ? 'edit_page' : 'edit_post';
    if (
        ! current_user_can( $cap, $pid )
        || ! post_type_supports( $post->post_type, 'thumbnail' )
        || defined( 'DOING_AUTOSAVE' )
    ) {
        return;
    }
    $action = 'thumbnail_ext_url_' . $pid . get_current_blog_id();
    $nonce = filter_input( INPUT_POST, 'thumbnail_ext_url_nonce', FILTER_SANITIZE_STRING );
    $url = filter_input( INPUT_POST,  'thumbnail_ext_url', FILTER_VALIDATE_URL );
    if (
        empty( $nonce )
        || ! wp_verify_nonce( $nonce, $action )
        || ( ! empty( $url ) && ! url_is_image( $url ) )
    ) {
        return;
    }
    if ( ! empty( $url ) ) {
        update_post_meta( $pid, '_thumbnail_ext_url', esc_url($url) );
        if ( ! get_post_meta( $pid, '_thumbnail_id', TRUE ) ) {
            update_post_meta( $pid, '_thumbnail_id', 'by_url' );
        }
    } elseif ( get_post_meta( $pid, '_thumbnail_ext_url', TRUE ) ) {
        delete_post_meta( $pid, '_thumbnail_ext_url' );
        if ( get_post_meta( $pid, '_thumbnail_id', TRUE ) === 'by_url' ) {
            delete_post_meta( $pid, '_thumbnail_id' );
        }
    }
}

কিছু সুরক্ষা যাচাইয়ের পরে ফাংশনটি পোস্ট করা ইউআরএলটি দেখে এবং এটি যদি ঠিক থাকে তবে পোস্ট মেটাতে এটি সংরক্ষণ করে '_thumbnail_ext_url'। যদি URL টি খালি থাকে এবং মেটাটি সংরক্ষণ করা হয়, তবে এটি মুছে ফেলা হবে, কেবলমাত্র বাহ্যিক URL ক্ষেত্রটি খালি করে মেটা সরানোর অনুমতি দেয়।

যখন আমাদের বাহ্যিক চিত্রের URL মেটাতে সেট করা থাকে তখন বৈশিষ্ট্যযুক্ত চিত্রের চিহ্নআপ আউটপুট করা শেষ কাজটি হয়:

function thumbnail_external_replace( $html, $post_id ) {
    $url =  get_post_meta( $post_id, '_thumbnail_ext_url', TRUE );
    if ( empty( $url ) || ! url_is_image( $url ) ) {
        return $html;
    }
    $alt = get_post_field( 'post_title', $post_id ) . ' ' .  __( 'thumbnail', 'txtdomain' );
    $attr = array( 'alt' => $alt );
    $attr = apply_filters( 'wp_get_attachment_image_attributes', $attr, NULL );
    $attr = array_map( 'esc_attr', $attr );
    $html = sprintf( '<img src="%s"', esc_url($url) );
    foreach ( $attr as $name => $value ) {
        $html .= " $name=" . '"' . $value . '"';
    }
    $html .= ' />';
    return $html;
}

আমরা করেছি.

কি করার বাকি আছে

বৈশিষ্ট্যযুক্ত ইমেজ আউটপুট আমি ব্যবহার না করেছি widthবা heightবৈশিষ্ট্য, কিংবা ক্লাস ওয়ার্ডপ্রেস সাধারণত যোগ করে, মত'attachment-$size' । কারণ একটি চিত্রের আকার স্নিগ্ধ করার জন্য অতিরিক্ত কাজ করা দরকার যা পৃষ্ঠা লোডিংকে কমিয়ে দেবে, বিশেষত যদি আপনার পৃষ্ঠাতে একাধিক বৈশিষ্ট্যযুক্ত চিত্র থাকে।

যদি আপনার এই বৈশিষ্ট্যগুলির প্রয়োজন হয় তবে আপনি আমার কোডটি wp_get_attachment_image_attributes'ফিল্টার করার জন্য একটি কলব্যাক যোগ করতে পারেন (এটি একটি স্ট্যান্ডার্ড ওয়ার্ডপ্রেস হুক ) বা হতে পারে আপনি আমার কোডটি চিত্রের আকার এবং আউটপুট সম্পর্কিত বৈশিষ্ট্য এবং শ্রেণিগুলিকে স্নিগ্ধ করতে পারেন।

প্লাগিন গিস্ট

সকল কোড এখানে একটি সঠিক টেক্সট ডোমেইন আরম্ভের যোগ করার বাদে পোস্ট, একটি সারকথা মধ্যে একটি পূর্ণ কাজ প্লাগইন হিসাবে পাওয়া যায় এখানে । সেখানে কোডটি একটি নেমস্পেস ব্যবহার করে, সুতরাং এর জন্য পিএইচপি 5.3+ প্রয়োজন।

মন্তব্য

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


আমি এই কোডটি কোথায়
রাখছি

কোন কোডটি, কোন পৃষ্ঠায় আমাদের লিখতে হবে তা দয়া করে ব্যাখ্যা করতে পারেন? আমি পিএইচপি / ওয়ার্ডপ্রেসে একজন নবাগত তাই দয়া করে ধাপে ধাপে ব্যাখ্যা করুন। ধন্যবাদ
অঙ্কিত অগ্রওয়াল

@ অঙ্কিতআগ্রওয়াল এখানে দেখুন
গাজাজাপ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.