લો-કોડ બ્લોક પેટર્ન કેવી રીતે બનાવવી


શું તમે તમારી પોતાની વર્ડપ્રેસ બ્લોક પેટર્ન બનાવવા અને તમારી સાઇટ પર ઘણી જગ્યાએ તેનો ઉપયોગ કરવા તૈયાર છો? શું તમે કસ્ટમ પ્લગઇનને કોડિંગ કર્યા વિના આ કરવા માંગો છો?

ઉદ્દેશ્યો

આ પાઠ પૂર્ણ કર્યા પછી, સહભાગીઓ સક્ષમ હશે:

  • વર્ડપ્રેસ એડિટરમાં બ્લોક્સનું જૂથ ડિઝાઇન કરો.
  • બ્લોક પેટર્ન નોંધણી પ્લગઇનનો ઉપયોગ કરીને બ્લોક પેટર્ન બનાવો

પૂર્વજરૂરીયાતો કૌશલ્યો

સહભાગીઓ આ પાઠમાંથી સૌથી વધુ મેળવશે જો તેઓ આનાથી પરિચિત હોય:

તૈયારી પ્રશ્નો

  • શું તમે તમારી સમગ્ર સાઇટ પર બહુવિધ સ્થળોએ બ્લોક પેટર્નનો ઉપયોગ કરવા માંગો છો? જો તમે પેટર્ન ડાયરેક્ટરીમાંથી પેટર્નની નકલ કરી હોય, તો તમને જણાયું છે કે તમે તેનો એકવાર ઉપયોગ કરી શકો છો. તેનો ફરીથી ઉપયોગ કરવાનો અર્થ એ છે કે તે કોડની ફરીથી નકલ કરવી.
  • શું તમે તમારી સાઇટ પર બ્લોક પેટર્ન ઉમેરવા માંગો છો, પરંતુ તમારી થીમ ફાઇલોને સંશોધિત કરશો નહીં અથવા તમારું પોતાનું પ્લગઇન બનાવશો નહીં?

જરૂરી સામગ્રી

  • વર્ડપ્રેસનું સ્થાનિક ઇન્સ્ટોલ
  • એક પ્લગઇન જે કસ્ટમ બ્લોક પેટર્નની નોંધણી કરે છે, જેમ કે કસ્ટમ બ્લોક પેટર્ન

પ્રસ્તુતકર્તા માટે નોંધો

  • કસ્ટમ બ્લોક પેટર્ન પ્લગઇન કેવી રીતે ઇન્સ્ટોલ કરવું તે દર્શાવો

પાઠની રૂપરેખા

  • પોસ્ટમાં, બહુવિધ બ્લોક્સને સ્ટાઈલ કરો જેનો ઉપયોગ અમારી બ્લોક પેટર્ન માટે કરવામાં આવશે
  • કોડને કસ્ટમ બ્લોક પેટર્ન પોસ્ટમાં પેસ્ટ કરો
  • પરીક્ષણ કરો કે બ્લોક પેટર્ન ઉપલબ્ધ છે

કસરતો

નવી બ્લોક પેટર્ન બનાવો

અમે સાથે મળીને બ્લોક પેટર્ન બનાવી છે. હવે તમારો વારો છે. પ્રેક્ટિસ માટે, બીજી બ્લોક પેટર્ન બનાવો.

  • એક અલગ બ્લોક પેટર્ન લેઆઉટ બનાવો
  • તમારી પેટર્ન પ્રકાશિત કરો અને પરીક્ષણ કરો

આકારણી

જો તમે પ્લગઇન અથવા થીમ બનાવો છો તો જ બ્લોક પેટર્ન ઉમેરી શકાય છે:

  1. સાચું
  2. ખોટું

જવાબ: 2. તમે નવા કસ્ટમ બ્લોક પેટર્ન કોડમાં પેસ્ટ કરવા માટે પ્લગઇનનો ઉપયોગ કરી શકો છો.

તમે એડિટરનો ઉપયોગ કરીને નવી બ્લોક પેટર્ન બનાવી શકો છો.

  1. સાચું
  2. ખોટું

જવાબ: 1. સાચું. તમે પહેલા એડિટરમાં બહુવિધ બ્લોક્સનું લેઆઉટ બનાવી શકો છો.

વધારાના સંસાધનો

ઉદાહરણ પાઠ

વર્ડપ્રેસ પેટર્ન ડાયરેક્ટરી સાથે, તમે સરળતાથી તમારી સાઇટ પર પેટર્નની નકલ કરી શકો છો, તેને સીધી તમારી સામગ્રીમાં પેસ્ટ કરી શકો છો. પરંતુ જો તમે તેનો ફરીથી અન્યત્ર ઉપયોગ કરવા માંગતા હો, અથવા તમારી પોતાની બનાવવા માંગતા હો, તો તમારે થોડું કોડિંગ કરવાની જરૂર પડશે.

જો આ તમારી પહેલી વખત WordPress સાથે કોડને સ્પર્શ કરવાનો છે, તો તમે યોગ્ય સ્થાને છો. આ પાઠમાં, તમારે ફક્ત અમારા ઉદાહરણ કોડની નકલ કરવાની અને તેને પ્લગઇનમાં પેસ્ટ કરવાની જરૂર પડશે. પ્લગઇન તમારા માટે તમામ કામ કરશે.

બ્લોક પેટર્ન લેઆઉટ બનાવવું

પ્રારંભ કરવા માટે, અમારી બ્લોક પેટર્નમાં સમાવવા માટે બ્લોક્સ મૂકવા માટે પોસ્ટનો ઉપયોગ કરો. અમે અમારા બ્લોક પેટર્નના ઉદાહરણમાં ઉપયોગ કરીશું તે બ્લોક્સ પર અહીં એક નજર છે:

List view is expanded to show blocks used in a styled layout.  Shown in the post editor is a cover block containing an image of a lake with trees surrounding it while leaves are turning. Over the image on the left is a transparent grey column with white text showing a title, separator, and a paragraph.

તમે બ્લોક્સ લેઆઉટ બનાવ્યા પછી, કોડ એડિટર મોડ જુઓ. ઉપલા જમણા ખૂણામાં 3 ડોટ અથવા કબાબ વિકલ્પો મેનૂ પસંદ કરો. પછી કોડ એડિટર પસંદ કરો.

Code editor with code displayed and the 3 dots options highlighted

તમે અહીંથી તમારા બ્લોક માર્કઅપની નકલ કરશો. વિઝ્યુઅલ મોડમાં પણ તમામ બ્લોક્સની નકલ કરવી શક્ય છે પરંતુ તમામ બ્લોક્સને એકસાથે પ્રકાશિત કરવા માટે વધુ સામેલ થઈ શકે છે.

બ્લોક પેટર્નની નોંધણી કરવા માટે પ્લગઇનનો ઉપયોગ કરવો

બ્લોક પેટર્ન બનાવવા માટે, તમે કસ્ટમ બ્લોક પેટર્ન પ્લગઇનનો ઉપયોગ કરી શકો છો. પ્લગઇન્સ > નવું ઉમેરો > શોધ > કસ્ટમ બ્લોક પેટર્ન પર જાઓ. પ્લગઇન ઇન્સ્ટોલ અને સક્રિય કરો.

આગળ, બ્લોક પેટર્ન > નવું ઉમેરો પર જાઓ. તમે તમારી બ્લોક પેટર્નને વિઝ્યુઅલ અથવા કોડ એડિટર મોડમાં પેસ્ટ કરી શકો છો. આ તેને બ્લોક ઇન્સર્ટરમાંથી વિકલ્પ તરીકે સંગ્રહિત કરશે. બ્લોક પેટર્ન પ્રકાશિત કરો.

Screenshot shows at left, the administration dash navigation menu showing the Block Patterns menu item that was inserted by activating the plugin, with the add new menu item highlighted with a square around it.  The post content shows the code mode, and in the far top right the kebab menu or 3 dots is featured with a square around it.  The drop menu displays how to toggle to code editor mode.

અમારી બ્લોક પેટર્નનું પરીક્ષણ કરી રહ્યું છે

હવે જ્યારે અમારી પાસે અમારું બ્લોક પેટર્ન પ્લગઇન અપલોડ છે, તે પરીક્ષણ કરવાનો સમય છે. પોસ્ટ > નવી પોસ્ટ પર જાઓ. પોસ્ટ સામગ્રીમાં, બ્લોક ઇન્સર્ટર > પેટર્ન > કસ્ટમ બ્લોક પેટર્ન પસંદ કરો. અમે હમણાં જ બનાવેલ પેટર્ન માટે બ્રાઉઝ કરો.

example block pattern displayed with the Block Inserter, Patterns, Custom Block Patterns featured at left.

લેસન સમેટો

હવે તમે તમારી પોતાની બ્લોક પેટર્ન બનાવી છે, તેને કસ્ટમ બ્લોક પેટર્ન પ્લગઇનમાં ઉમેર્યું છે અને તેને તમારી સાઇટમાં દાખલ કર્યું છે.

ઉપર દર્શાવેલ કસરતો અને મૂલ્યાંકન સાથે અનુસરો.