वर्डप्रेस इमेज ब्लॉक के साथ काम करना: वर्डप्रेस में इमेज कैसे जोड़ें [+गुप्त टिप]

वर्डप्रेस इमेज ब्लॉक के साथ काम करना: वर्डप्रेस में इमेज कैसे जोड़ें [+गुप्त टिप]

विषयसूची

कई उपयोगकर्ताओं के लिए छवि के साथ काम करना वास्तव में निराशाजनक हो सकता है। पूरे लेआउट में अच्छा दिखने के लिए सही पहलू अनुपात चुनना या छवियों का सही आकार बदलना हमेशा आसान नहीं होता है।

  1. वर्डप्रेस इमेज ब्लॉक का उपयोग क्यों करें
  2. वर्डप्रेस इमेज ब्लॉक के साथ इमेज कैसे जोड़ें
  3. अतिरिक्त स्वरूपण छवियाँ प्रक्रिया
  4. लेख के अंदर हमारी ओर से अतिरिक्त टिप

पुराने वर्डप्रेस संस्करण (v5.0 तक) +मीडिया जोड़ें बटन का उपयोग करके छवियां जोड़ते हैं। समस्या यह थी कि छवि आकार में न्यूनतम परिवर्तन के बावजूद भी आपको इसे फिर से अपलोड करना होगा। इसका मतलब है समय की बर्बादी और अनावश्यक क्लिक।

नए ब्लॉक-आधारित संपादक गुटेनबर्ग ने अंतिम उपयोगकर्ताओं के लिए इस प्रक्रिया को सरल बनाने के लिए वर्डप्रेस में छवियों को जोड़ने का तरीका बदल दिया है। इस लेख में हम आपको वर्डप्रेस इमेज ब्लॉक को जोड़ने और संपादित करने के बारे में व्यावहारिक गाइड दिखाएंगे। इसके अलावा, हम छवियों को चिपकाने का एक और विकल्प समझाएंगे - केवल कुछ क्लिक के साथ किसी छवि को सामग्री क्षेत्र में कॉपी और पेस्ट कैसे करें। हम आपको WP 5.3 से आने वाली नई जोड़ी गई सुविधाओं से भी परिचित कराएंगे।

लेकिन पहले बात करते हैं कि आपको पोस्ट और पेजों में छवियों का उपयोग क्यों करना चाहिए।

आपकी वेबसाइट के लिए वर्डप्रेस इमेज ब्लॉक क्यों जरूरी है?

ध्यान आकर्षित

छवियाँ वेबसाइट आगंतुकों का ध्यान आकर्षित करती हैं। आपकी वेबसाइट पर विज़िटरों को अधिक समय तक बनाए रखने के लिए उन्हें दिलचस्प होना चाहिए। छवियों के बिना ब्लॉग पोस्ट के बारे में सोचें। यह केवल पाठ का एक समूह है। पहली नज़र में यह बहुत दिलचस्प नहीं है, भले ही यह मूल्यवान और जानकारी से भरपूर हो। इसके अलावा तस्वीरें आपके विषय की बेहतर कल्पना करने और उसका वर्णन करने में मदद कर सकती हैं।

इसी कारण से हमें महत्वपूर्ण चीज़ों पर ध्यान केंद्रित करने के लिए वर्डप्रेस इमेज ब्लॉक का उपयोग करने की आवश्यकता है।

छवियों के साथ या बिना छवियों के 2 ब्लॉगों का उदाहरण
छवियों के साथ या बिना छवियों के 2 ब्लॉगों का उदाहरण

उदाहरणात्मक पाठ और संदर्भ

सामग्री को समझने के लिए छवियां भी एक आवश्यक हिस्सा हैं क्योंकि वे आगंतुकों को बेहतर ढंग से समझने की अनुमति देती हैं कि लेख किस बारे में है। इन्फोग्राफिक्स की बदौलत आप जटिल कनेक्शनों को समझा सकते हैं और चीजों को सरल तरीके से बता सकते हैं। यह आगंतुकों को उस समस्या के बारे में बेहतर ढंग से जानने में मदद करता है जिसके बारे में आप बात करते हैं।

इन्फोग्राफिक उदाहरण
बेहतर पाठ स्पष्टीकरण के लिए इन्फोग्राफिक

वेबसाइट को अच्छा बनायें

इसके अलावा, छवियां पूरी वेबसाइट डिज़ाइन को अच्छी तरह से अंतिम रूप देती हैं। यह सब वेबसाइट लेआउट के बारे में नहीं है, बल्कि उपयोगिता के बारे में भी है। सही ढंग से चुनी गई और रखी गई छवि विज़िटर को आपकी वेबसाइट को आसानी से ब्राउज़ करने में मदद कर सकती है।

वर्डप्रेस ब्लॉक एडिटर में इमेज कैसे जोड़ें

पोस्ट या पेज में एक छवि डालने के लिए आपको कोर ब्लॉक - इमेज ब्लॉक जोड़ना होगा। इसे करने के कई तरीके हैं:

- शीर्ष बार में या संपादक में कहीं भी "+" का उपयोग करना

"+" पर क्लिक करके इमेज ब्लॉक जोड़ें
“+” पर क्लिक करके वर्डप्रेस इमेज ब्लॉक जोड़ना

- स्लैश "/" का उपयोग करना और बाद में "छवि" शब्द लिखना

स्लैश का उपयोग करके छवि ब्लॉक जोड़ें
स्लैश "/" का उपयोग करके छवि ब्लॉक जोड़ना

नया ब्लॉक बनाया जाएगा जहां आप वास्तविक छवियां जोड़ सकते हैं।

वर्डप्रेस पर चित्र अपलोड करना

आप जहां चाहें वहां छवियां कैसे लगाएं?

  • अपलोड का उपयोग करें, और अपनी हार्ड ड्राइव से एक छवि चुनें
  • मीडिया लाइब्रेरी का उपयोग करें, जहां आप उन छवियों का चयन कर सकते हैं जो आपकी वेबसाइट पर पहले ही अपलोड की जा चुकी हैं
  • माउस का प्रयोग करें और छवि को खींचें और छोड़ें
  • छवि URL पता डालें
छवियाँ अपलोड करने के विकल्प
छवियाँ अपलोड करने के लिए उपलब्ध विकल्प - उनमें से एक छवि को फ़ोल्डर से खींचना और छोड़ना है

वर्डप्रेस छवियों को जोड़ने की कम ज्ञात विधि

जैसा कि पहले बताया गया है, अपलोड विंडो के माध्यम से छवियाँ अपलोड करने के अलावा, छवि सम्मिलित करने का एक और तरीका है (और यह बहुत तेज़ तरीका है!)। बेहतर वर्डप्रेस संपादक के साथ, आप यह करने में सक्षम हैं:

  • किसी भी सामग्री से छवि कॉपी करें, या
  • बस माउस कर्सर से छवि को "खींचें"।

और फिर चयनित छवि को सामग्री क्षेत्र में उस स्थान पर डालें या ले जाएँ (छोड़ें) जिसे आप चाहते हैं।

छवि को प्रकाशित पोस्ट से सामग्री क्षेत्र में खींचें और छोड़ें
चयनित छवि को खींचें और जहां आपको आवश्यकता हो वहां छोड़ें (सीधे वर्डप्रेस संपादक पर)

आप इसी तकनीक का उपयोग उस स्थिति में भी कर सकते हैं, जब आप अपनी स्क्रीन से खींची गई छवि चिपकाना चाहते हों। केवल तीन सरल चरणों की आवश्यकता है. पहला, आपको एक स्क्रीनशॉट लेना होगा प्रिंट स्क्रीन सुविधा का उपयोग करना। उदाहरण के लिए, विंडोज़ 10 स्निप और स्केच नामक अपना डिफ़ॉल्ट स्निपेट टूल प्रदान करता है, जो शॉर्टकट के माध्यम से भी उपलब्ध है - बस अपने कीबोर्ड पर विन + शिफ्ट + एस कुंजी एक साथ दबाएं। फिर उस छवि क्षेत्र का चयन करें जिसे आप कैप्चर करना चाहते हैं। अंतिम चरण मूल शॉर्टकट Ctrl+V का उपयोग करके कॉपी की गई छवि (या उसके भाग) को सामग्री क्षेत्र में पेस्ट करना है।

और आपके द्वारा अपने संपादक में चिपकाई गई वर्डप्रेस छवि का क्या होगा? खैर, यह स्वचालित रूप से मीडिया लाइब्रेरी में जुड़ जाता है जहां आप इस छवि को संपादित कर सकते हैं।

छवि मेटाडेटा सीमित विकल्प

इमेज एडिटिंग के अंदर आप इसका शीर्षक, कैप्शन, विवरण और वैकल्पिक टेक्स्ट सेट कर सकते हैं। दुर्भाग्य से, आप छवि फ़ाइल नाम नहीं बदल सकते - यह अपना स्वतः-जनित नाम रखेगा, जैसे कि छवि-1.पीएनजी और इसी तरह। फ़ाइल नामकरण अनुशंसाओं के साथ विरोध के कारण एसईओ अनुकूलन के संदर्भ में इस प्रकार का फ़ाइल नाम थोड़ा नुकसानदेह हो सकता है। इसलिए, आपको वर्डप्रेस छवियों को सामग्री क्षेत्र में ले जाने से पहले इस पहलू पर विचार करना होगा।

छवि संरेखण

छवि संरेखण मुख्य विशेषताओं में से एक है। इससे कोई फर्क नहीं पड़ता कि आप पोस्ट या पेज में वर्डप्रेस इमेज ब्लॉक जोड़ते हैं, आपको हमेशा वेबसाइट डिज़ाइन के आधार पर प्लेसमेंट पर विचार करना चाहिए। उसके आधार पर छवि संरेखण को इसके ऊपर टूलबार में चुना जा सकता है। डिफ़ॉल्ट रूप से आप छवि को बाएँ, दाएँ या मध्य में संरेखित कर सकते हैं। कुछ वर्डप्रेस थीम छवियों को चौड़ी या पूरी चौड़ाई के रूप में केंद्रित करने की अनुमति देती हैं। यह वास्तव में थीम सुविधाओं पर निर्भर करता है क्योंकि सभी थीम इसका समर्थन नहीं करती हैं।

छवि संरेखण सेटिंग्स
छवि संरेखण विकल्प

छवियों का आकार बदलना

वर्डप्रेस एडिटर में इमेज ब्लॉक की क्रांतिकारी विशेषता व्यावहारिक आकार बदलना है। छवि को छोटा या बड़ा करने के लिए बस उसके किनारे को खींचें। इस तरह आप सामग्री में पाठ के आधार पर छवि का आकार बदल सकते हैं। संपादक स्वचालित रूप से छवि अनुपात रखता है जिसका अर्थ है कि आपको विकृतियों के बारे में चिंता करने की ज़रूरत नहीं है।

छवि का आकार बदलना
इसके हैंडल को पकड़कर चिकनी छवि का आकार बदलना

नई ब्लॉक शैली जो एक छवि को एक वृत्त आकार में बदल देती है

यदि आप वर्डप्रेस के नवीनतम उपलब्ध संस्करण का उपयोग कर रहे हैं तो आपने एक नई सर्कल-क्रॉप शैली देखी होगी जिसे आप अपनी छवि के लिए उपयोग कर सकते हैं। पहले "ब्लॉक प्रकार या शैली बदलें" आइकन पर क्लिक करके शीर्ष टूलबार के माध्यम से छवि का आकार बदला जा सकता है। डिफ़ॉल्ट (आयत) आकार को एक वृत्त आकार में काटा जाएगा।

छवि का वृत्त आकार
आपकी छवियों के लिए नया वृत्त शैली डिज़ाइन

वर्डप्रेस इमेज ब्लॉक में नई सुविधाएँ (WP 5.3 में जोड़ी गईं)

उच्च रिज़ॉल्यूशन छवियों के लिए समर्थन

WP 5.3 का सबसे बड़ा आकर्षण वर्डप्रेस प्लेटफ़ॉर्म पर बेहतर इमेज प्रोसेसिंग है। छवियों के साथ काम करने की अब दो मुख्य विशेषताएं हैं:

  1. अपलोड फिर से शुरू करना - यदि आप उच्च रिज़ॉल्यूशन वाली तस्वीरें अपलोड कर रहे हैं और इंटरनेट कनेक्शन विफल हो जाता है, तो अपलोड प्रक्रिया बाधित बिंदु से स्वचालित रूप से जारी रहेगी
  2. स्वचालित छवि रोटेशन - नवीनतम जारी WP संस्करण यह सुनिश्चित करता है कि गलत तरीके से घुमाई गई छवियां अपलोड होते ही स्वचालित रूप से सही स्थिति में घूम जाती हैं

इंस्पेक्टर में सेटिंग्स

सटीक आयामों को कॉन्फ़िगर करने के लिए आप संपादक में दाहिने साइडबार पर इंस्पेक्टर का उपयोग कर सकते हैं। छवि आकार सेटिंग्स थंबनेल, मध्यम, बड़े या पूर्ण आकार जैसे उपयोग के लिए तैयार प्रारूप प्रदान करती हैं। आप निश्चित रूप से चौड़ाई और ऊंचाई को पिक्सेल या प्रतिशत में सेट कर सकते हैं।

उपलब्ध छवि आकार सेटिंग्स
छवि आकार सेटिंग्स

यह बहुत तेज़ और व्यावहारिक है क्योंकि आप सभी छवि आकार परिवर्तन सीधे वर्डप्रेस इमेज ब्लॉक के अंदर और सब कुछ ब्लॉक संपादक में एक ही स्थान पर कर सकते हैं।

अन्य छवियाँ ब्लॉक सेटिंग्स

यूआरएल एड्रेस कैसे जोड़ें

छवियों को स्थिर छवियों के रूप में उपयोग किया जा सकता है या उन्हें क्लिक करने योग्य और लिंक भी किया जा सकता है:

  •   मीडिया फ़ाइल
  •   अनुलग्नक पृष्ठ
  •   कस्टम यूआरएल
छवि लिंक सेटिंग्स
उपलब्ध छवि लिंक सेटिंग्स

वर्डप्रेस इमेज ब्लॉक में पिक्चर कैसे एडिट करें

पेंसिल आइकन पर क्लिक करने के बाद प्रत्येक छवि को संपादित किया जा सकता है। मीडिया लाइब्रेरी के साथ मॉडल विंडो खुलेगी जहां आप वैकल्पिक टेक्स्ट, शीर्षक, कैप्शन और विवरण लिख सकते हैं। उसी तरह जैसे आप पहले से ही क्लासिक संपादक के साथ पुराने वर्डप्रेस संस्करण में ऐसा करने के आदी हैं।

एसईओ उद्देश्यों के लिए छवि विवरण
अपनी वेबसाइट एसईओ को बेहतर बनाने के लिए आपको छवि विवरण भरना चाहिए

इन पाठों को भरना क्यों महत्वपूर्ण है?

यदि विज़िटर छवि को बड़ा देखने के लिए उस पर क्लिक करते हैं, तो उन्हें छवि शीर्षक (उदाहरण के लिए Citadela मुखपृष्ठ) दिखाई देता है, छवि फ़ाइल नाम नहीं। साथ ही, यदि छवि लोड करने में कोई समस्या है, तो आपकी वेबसाइट पर वैकल्पिक पाठ दिखाया जाएगा।

अतिरिक्त युक्तियाँ

वर्डप्रेस इमेज ब्लॉक के लिए इन सभी कारणों और सेटिंग्स के अलावा सबसे महत्वपूर्ण बात यह है। आप छवियों का उपयोग करके अपनी वेबसाइट पर अधिक विज़िटर प्राप्त कर सकते हैं। तो उन्हें कैसे प्राप्त करें?

आजकल लोग पढ़ने में आलस करते हैं। वे उत्तर खोजने के लिए चित्रों को नीचे स्क्रॉल करना पसंद करते हैं। आपकी फ़ोटो और छवियाँ कैसे रैंक कर सकती हैं? पाठ उत्तर है. एसईओ अनुकूलन के लिए सही छवि शीर्षक और विवरण बहुत महत्वपूर्ण है। वैकल्पिक पाठ भरना न भूलें. तब Google छवि को बेहतर ढंग से समझ सकता है। इसलिए आपके पास छवि खोज परिणामों में इसे रैंक करने का अधिक मौका होगा।

इमेज कैप्शन जोड़ने के 2 तरीके

ब्लॉक संपादक का उपयोग करके छवि कैप्शन जोड़ना बहुत आसान है। छवि के ठीक नीचे पाठ लिखने के लिए एक स्थान है। यह पहला तरीका है - दिए गए उपपृष्ठ पर इस सटीक छवि पर कैप्शन लिखा जाता है।

तस्वीर का शीर्षक
छवि के ठीक नीचे कैप्शन लिखा गया है

दूसरा तरीका मीडिया लाइब्रेरी के भीतर पेंसिल आइकन (छवि संपादित करें) का उपयोग करके छवि कैप्शन लिखना है। इस तरह आप पूरी वेबसाइट पर विश्व स्तर पर छवि कैप्शन जोड़ रहे हैं। इसका मतलब है कि यदि आप एक ही छवि का उपयोग तीन अलग-अलग स्थानों पर करते हैं, तो यह हमेशा इस कैप्शन का उपयोग करेगा।

मीडिया लाइब्रेरी में छवि कैप्शन जोड़ा जा रहा है
छवि कैप्शन मीडिया लाइब्रेरी के माध्यम से जोड़ा गया

क्या आपको पसंद है कि वर्डप्रेस इमेज ब्लॉक में इमेज जोड़ना कितना आसान है? इसे स्वयं आज़माएँ!

हमारे बिल्कुल नए Citadela वर्डप्रेस थीम और इसके कस्टम निर्मित लेआउट पैक के बारे में और जानें। वे विशेष रूप से विभिन्न प्रकार के व्यवसायों के लिए डिज़ाइन और विकसित किए गए थे और वे वर्डप्रेस ब्लॉक एडिटर के माध्यम से सामग्री को संपादित करने के नए तरीके का भी समर्थन करते हैं।

"Working with WordPress Image block: How to add images in WordPress [+Secret tip]" पर 7 विचार

  1. वास्तव में गुटेमबर्ग संपादक के पहले/बाद में कोई वास्तविक परिवर्तन नहीं हुआ है। वे सभी विकल्प पहले से ही मौजूद थे। और सच्चाई यह है कि गुटेमबर्ग संपादक पूरी तरह से विनाशकारी है, यही कारण है कि एलिमेंटर, डिवी और विजुअल कंपोजर इतने लोकप्रिय हैं। मुझे सचमुच उम्मीद है कि आपकी अगली रिलीज उन बिल्डर के साथ 100% संगत होगी, क्योंकि कोई भी वर्डप्रेस संपादक का उपयोग नहीं कर रहा है 😀

    1. नमस्ते,

      टिप्पणी करने के लिए धन्यवाद. हाँ, टेम्पलेट वर्डप्रेस कोडेक्स और मानकों के अनुसार लिखे गए सभी वर्डप्रेस प्लगइन्स के साथ संगत होगा।

      प्रोत्साहित करना!
      ज़्लात्को

    1. नमस्ते,

      पूछने के लिए धन्यवाद। हमारे प्रत्येक उत्पाद को नियमित आधार पर अद्यतन रखना हमारा मुख्य व्यवसाय है।
      यदि आप सिटी गाइड से Citadela थीम में अपग्रेड करने के विकल्प के बारे में रुचि रखते हैं जो वर्डप्रेस गुटेनबर्ग संपादक के साथ पूरी तरह से संगत होगा, तो उत्तर है: हां, हमारा इरादा प्लगइन जारी करने का है, जिसकी बदौलत आप सिटी से माइग्रेशन का प्रबंधन कर पाएंगे। Citadela निर्देशिका प्लगइन के साथ विस्तारित Citadela थीम के लिए गाइड थीम (पहला प्लगइन जल्द ही जारी किया जाना चाहिए)।

      ईमानदारी से!
      एआईटी टीम

  2. मैंने देखा है कि किसी छवि को सीधे गुटेनबर्ग संपादक में चिपकाना संभव है। इसके परिणामस्वरूप मीडिया लाइब्रेरी में एक छवि जुड़ जाएगी, जिसे इमेज-1, इमेज-2 आदि कहा जाएगा...

    एक विशेषता जो मैंने इस पृष्ठ पर नहीं पढ़ी, इसलिए शायद जोड़ने के लिए एक अच्छी सुविधा हो।

    यह विशेष रूप से तब उपयोगी होता है जब किसी छवि को विंडोज़ स्निपेट टूल (विन+शिफ्ट+एस) का उपयोग करके स्क्रीनग्रैब किया गया हो। फिर इसे सीधे लेख में वहीं चिपकाया जा सकता है जहां कर्सर सेट है।

    इस पद्धति का सबसे बड़ा नकारात्मक पक्ष यह है कि मुझे इसे चिपकाने के दौरान या बाद में फ़ाइल नाम को संपादित करने का कोई तरीका नहीं मिला है.. इसलिए यह बहुत एसईओ अनुकूल नहीं होगा।

  3. नमस्ते
    मुझे "मल्टी ऑथर ब्लॉग" थीम पर छवियां जोड़ने में समस्या आ रही है। प्रत्येक ब्लॉग पोस्ट के शीर्ष पर घूमने वाले स्लाइडर में दूसरी या तीसरी छवि जोड़ना असंभव प्रतीत होता है। इसका मतलब यह है कि स्लाइडर कुछ सेकंड के बाद खाली है, जैसे कि वह दूसरी छवि की उम्मीद कर रहा हो।
    कृपया इसे ठीक कर सकते हैं?
    वैकल्पिक रूप से: एक प्रश्न - "मल्टी ऑथर ब्लॉग" आर्कनेटवर्क के लिए महत्वपूर्ण है (स्लोवाकिया में हमारा एक भागीदार है) क्योंकि हम इसे अपने नेचर प्रोजेक्ट्स में प्रतिभागियों के लिए "रिपोर्टिंग" प्लेटफॉर्म के रूप में उपयोग करते हैं। क्या आपकी लाइब्रेरी में कोई वैकल्पिक थीम है जिसे हम उसी तरह उपयोग कर सकते हैं?
    ब्लेयर उर्कहार्ट (आजीवन सदस्यता - आईटी विभाग आर्कनेटवर्क)

    1. नमस्ते,

      लिखने के लिए धन्यवाद। सबसे पहले, यदि आप कर सकते हैं तो कृपया अपने थीम/प्लगइन संस्करणों को नवीनतम के साथ जांचें: हम मुफ्त में एआईटी अपडेटर प्लगइन का उपयोग करने की सलाह देते हैं -> https://www.ait-themes.club/wordpress-plugins/ ait-updater/ , (या दस्तावेज़ीकरण प्लगइन कैसे सेट करें: https://www.ait-themes.club/doc/updater-plugin-documentation/
      उत्पाद सक्रियण से संबंधित निर्देश आपको यहां मिलेंगे: https://www.ait-themes.club/doc/theme-activation/

      यदि आपकी समस्या अभी भी बनी रहती है, तो कृपया हमें कुछ छवियां प्रदान करें या कृपया AIT SysInfo रिपोर्ट के साथ समर्थन मंच के माध्यम से हमसे संपर्क करें: https://www.ait-themes.club/wordpress-plugins/ait-sysinfo/। हमारे तकनीशियन किसी भी विषय-संबंधित मुद्दे पर आपकी सहायता करने के लिए तैयार हैं: ग्राहक सहायता कार्य दिवसों के दौरान सुबह 8 बजे से शाम 5 बजे तक मध्य यूरोपीय समय के दौरान प्रदान की जाती है क्योंकि मैं आपकी समस्या को दोहराने में सक्षम नहीं था। रिवोल्यूशन स्लाइडर सही ढंग से काम करता है।

      दूसरी बात,
      Citadela उत्पाद पैक में कुछ दिलचस्प सुविधाएँ जोड़ी गई हैं, कृपया तुलना तालिका पर एक नज़र डालें: https://www.ait-themes.club/next-generation-directorypro/

      यदि कुछ और है तो हम आपकी सहायता कर सकते हैं, कृपया हमसे वापस संपर्क करें।

      सधन्यवाद!
      ज़्लात्को
      एआईटी टीम

टिप्पणियाँ बंद हैं।