આપણે આ પાઠમાં કોઈપણ પ્લગઈન્સ અથવા કોડ વિના બ્લોક થીમનો ઉપયોગ કરીને હોમ પેજ બનાવીશું.
શીખવાના પરિણામો
- સ્ટેટિક હોમ પેજ સેટ કરો.
- તમારા પેજ ટેમ્પ્લેટ માટે હેડર અને ફૂટર બનાવો.
- તમારા હોમ પેજ પર વિવિધ પ્રકારના બ્લોક્સ અને પેટર્ન ઉમેરવા અને તેમને સુધારવા.
- બ્લોક ટૂલબાર અને સાઇડબાર સેટિંગ્સનો ઉપયોગ કરવો.
સમજણ પ્રશ્નો
- તમે તમારા હોમ પેજ પર કયો ટેમ્પ્લેટ સોંપવા માંગો છો?
- શું તમે હેડર અને ફૂટર પેટર્નનો ઉપયોગ કેવી રીતે કરવો તે જાણો છો?
- પોસ્ટ કન્ટેન્ટ બ્લોકનું કાર્ય શું છે?
ટ્રાન્સક્રિપ્ટ
નમસ્તે અને લર્ન વર્ડપ્રેસમાં આપનું સ્વાગત છે. આજે આપણે બ્લોક થીમ સાથે હોમ પેજ બનાવવા જઈ રહ્યા છીએ. હોમ પેજ તમારી સાઇટનું મુખ્ય કેન્દ્ર છે અને બ્રાન્ડના ચહેરા તરીકે કામ કરે છે. તે મુલાકાતીઓને તમારી સાઇટમાં ઊંડા ઉતરવા માટે પ્રોત્સાહિત કરશે, અને અલબત્ત તેમનું ધ્યાન ખેંચશે. આજના સત્રમાં, આપણે એક સ્ટેટિક હોમ પેજ સેટ કરીશું, હેડર અને ફૂટર ટેમ્પલેટ ભાગ બનાવીશું, સાઇટ શીર્ષક દૂર કરીશું અને બ્લોક એડિટરનો ઉપયોગ કરીને હોમ પેજ બનાવીશું. આજની યોજના એ છે કે જે હોમ પેજ મેં પહેલાથી બનાવ્યો છે તે ફરીથી બનાવવાનો છે. મેં આ ટ્રાવેલ હોમ પેજ બનાવવા માટે ફક્ત બ્લોક્સનો ઉપયોગ કર્યો છે, અને વાચકને વેબસાઇટમાં વધુ ઊંડે ખેંચી શકાય એવી તકો બનાવવાનો પ્રયાસ કર્યો છે.
સૌપ્રથમ, મેં ત્રણ પોસ્ટ બનાવી છે. મેં મારી વેબસાઇટ માટે જરૂરી બધાં મીડિયા ઉમેર્યા છે. મેં મારા નેવિગેશન મેનૂ માટે પેજીસ બનાવ્યા છે, મેં “Twenty Twenty-Two” નામની બ્લોક થીમ ઇન્સ્ટોલ કરી છે, અને હવે આપણે સેટિંગ્સ પર જઈશું અને પછી રીડિંગ પર ક્લિક કરીશું.
આગળનું પગલું એ છે કે સ્ટેટિક હોમ પેજ સેટ કરો, સ્ટેટિક પેજ પસંદ કરો અને તમારું હોમ પેજ અને તમારું પોસ્ટ્સ પેજ સેટ કરો, ત્યારબાદ સેવ ચેન્જીસ પર ક્લિક કરો. જ્યારે આપણે પાછા પેજીસમાં જઈશું, ત્યારે આપણે ધ્યાન આપશું કે બ્લોગની બાજુમાં પોસ્ટ્સ પેજ અને હોમની બાજુમાં ફ્રન્ટ પેજ લખાયું હશે. જ્યારે આપણે હોમ પેજ ખોલીએ છીએ, ત્યારે આપણે ધ્યાનમાં આવશે કે તેને ડિફોલ્ટ ટેમ્પ્લેટ સોંપવામાં આવ્યું છે, જે પેજ ટેમ્પ્લેટ છે. એટલે કે તે અન્ય પેજીસ જેવા જ હેડર અને ફૂટર શેર કરશે. જો તમે ઇચ્છો, તો તમે ન્યૂ પર ક્લિક કરીને હોમ પેજ માટે એક ખાસ, કસ્ટમ ટેમ્પ્લેટ બનાવી શકો છો.
એકવાર તમે તમારું સ્ટેટિક હોમ પેજ સેટ કરી લો, પછી Appearance પર જાઓ અને Editor પર ક્લિક કરો. આ તમને તમારા Site Editor પર લઈ જશે. List View પર ક્લિક કરો જેથી તમને પેજની રચનાનો વધુ સારો ખ્યાલ આવે, અને પછી આપણે જે પ્રથમ વસ્તુ કરવાના છીએ તે એ છે કે આપણે પોસ્ટ શીર્ષક દૂર કરીશું. અને પછી જો આપણે પોસ્ટ કન્ટેન્ટ પર ક્લિક કરીએ, તો યાદ રાખો કે આ તે જગ્યા છે જ્યાં તમારા પૃષ્ઠની કન્ટેન્ટ પ્રદર્શિત થશે. હું વર્તમાન હેડરને બદલવા માટે પેટર્નનો ઉપયોગ કરીશ. તેથી એકવાર તમે પેરેન્ટ બ્લોક પસંદ કરી લો, પછી Replace પર ક્લિક કરો અને પછી તમારી જરૂરિયાતોને પૂર્ણ કરતી સંબંધિત પેટર્ન શોધો. હું એવા હેડર પેટર્ન ની શોધમાં છું જેમાં સાઇટ લોગો વચ્ચેથી હોય અને બાજુએ નવિગેશન આઇટમ્સ હોય. ત્યારબાદ હું મારા પેજની લિંક્સ અને સાઇટ લોગો ઉમેરિશ. છેલ્લે, હું બેકગ્રાઉન્ડનો રંગ સફેદ રાખવા માંગું છું અને લખાણ અને લિંક્સનો રંગ કાળો રાખીશ.
હવે આપણે ફૂટર માટે પણ સમાન પ્રક્રિયા અપનાવી શકીએ છીએ, ફૂટર બ્લોક પસંદ કરો, Replace પર ક્લિક કરો અને જરૂરી ફૂટર પેટર્ન શોધો. બસ પછી કામ થઈ ગયુ, આ જુઓ!
આપણે અમારું ટેમ્પ્લેટ સેટ કરવાનું પૂર્ણ કરી લીધું છે, હવે આપણે આપણી સાઇટ પર કન્ટેન્ટ ઉમેરવાનું શરૂ કરી શકીએ છીએ. તો WordPress આઇકોન અથવા સાઇટ આઇકોન પર ક્લિક કરો અને ડેશબોર્ડ પર પાછા જાઓ. હોમ પેજ ખોલો અને હવે આપણે કન્ટેન્ટ બનાવવાનું શરૂ કરી શકીએ છીએ. હું જે પહેલી વસ્તુ ઉમેરવા માંગું છું તે છે ફીચર્ડ ઇમેજ, એટલે હું એક પેટર્ન ઉમેરીશ. હું પેટર્ન ડિરેક્ટરીમાં જઈશ અને હીરો બેનર ટાઇપ કરીશ. જ્યારે તમને યોગ્ય પેટર્ન મળી જાય, ત્યારે તમે તેને ફક્ત કોપી કરીને પેજમાં પેસ્ટ કરી શકો અને ત્યારબાદ તેમાં જરૂરી ફેરફારો કરી શકો.
સૌપ્રથમ, હું બેકગ્રાઉન્ડ ઇમેજ બદલીશ, ત્યારબાદ ઓપેસિટી બદલીશ અને પછી કન્ટેન્ટને પર્સનલાઇઝ કરવાનું શરૂ કરીશ, અને થોડી જ વારમાં, તમારી પાસે ટેક્સ્ટ સાથે હીરો ઇમેજ હશે. આગળ, હું એક ગેલેરી બ્લોક ઉમેરવા માંગું છું અને મારી મીડિયા લાઇબ્રેરીમાંથી ત્રણ છબીઓ પસંદ કરીશ. પછી હું લિસ્ટ વ્યૂ પર ક્લિક કરીશ, ગેલેરી બ્લોક પસંદ કરીશ, એલાઇનમેન્ટને પૂર્ણ પહોળાઈમાં અને બ્લોક સ્પેસિંગને શૂન્યમાં બદલીશ.
ગેલેરી બ્લોક પછી હું એક ખાસ ઓફર ઉમેરવા માંગુ છું અને આ કરવા માટે હું એક હેડિંગ અને કોલમ બ્લોકનો ઉપયોગ કરીશ. હું આગળ વધીને સ્પેશિયલ ઓફર લખીશ, ગોઠવણીને મધ્યમાં બદલીશ અને એન્ટર દબાવો. પછી હું બે કોલમ સાથે કોલમ બ્લોક ઉમેરીશ. હું લિસ્ટ વ્યૂ ખોલીશ જેથી ખાતરી કરી શકું કે મેં પેરેન્ટ બ્લોક પસંદ કર્યો છે. હું બ્લોકનું ગોઠવણી પૂર્ણ પહોળાઈમાં બદલીશ. ડાબા કોલમમાં, હું એક છબી ઉમેરીશ, હું સ્ટાઇલને ગોળાકાર બનાવીશ, એમા કેપ્શન ઉમેરીશ, હું બટન્સ બ્લોક ઉમેરીશ અને એમા લખીશ કે તમને આ ખાસ ઓફર સાથે 15% ડિસ્કાઉન્ટ મળશે. હું ગોઠવણીને મધ્યમાં, ત્રિજ્યાને 100 માં બદલીશ, એક લિંક ઉમેરીશ અને પૃષ્ઠભૂમિને કાળામાં બદલીશ; અને પછી જમણી કોલમમાં બરાબર એ જ કરીશ. હું ચાલુ રાખું તે પહેલાં, હું સ્પેસર બ્લોક્સનો ઉપયોગ કરીને થોડી જગ્યા બનાવવા માંગુ છું.
હવે હું મારી કેટલીક નવીનતમ પોસ્ટ્સ પ્રદર્શિત કરવા માટે એક ક્યુએરી લૂપ બ્લોક દાખલ કરવા જઈ રહ્યો છું. તો ચાલો એક હેડિંગ ઉમેરીએ અને તેને વેર ટુ નામ આપીએ, હું ગોઠવણીને પૂર્ણ પહોળાઈમાં અને ટેક્સ્ટ ગોઠવણીને મધ્યમાં બદલીશ. એન્ટર દબાવ્યા પછી, હું ક્યુએરી લૂપ બ્લોક દાખલ કરીશ અને સ્ટાર્ટ બ્લૅન્ક પર ક્લિક કરીશ. અને પછી હું છબી તારીખ અને શીર્ષક વિકલ્પ તેમજ ગ્રીડ વ્યૂ પસંદ કરીશ. પછી હું ગોઠવણીને પૂર્ણ પહોળાઈમાં બદલીશ. છબીઓમાંથી એક પસંદ કરો અને તમારા સાઇડબાર સેટિંગ્સમાં, ખાતરી કરો કે બધી છબીઓ બરાબર સમાન કદની છે અને તમારી જરૂરિયાતોને પૂર્ણ કરે છે તેની ઊંચાઈ બદલો. છેલ્લે, લિસ્ટ વ્યૂ પર ક્લિક કરો અને કોઈપણ બ્લોક્સને દૂર કરો જે તમને મહત્વપૂર્ણ ન લાગે. ઉદાહરણ તરીકે, પેજિનેશન બ્લોક, નો રિઝલ્ટ બ્લોક અને પોસ્ટ ડેટ બ્લોક.
બીજો સ્પેસર બ્લોક ઉમેર્યા પછી, હું આગળ વધીને એક કવર બ્લોક દાખલ કરીશ. હું મારી મીડિયા લાઇબ્રેરીમાંથી એક છબી પસંદ કરીશ, સંરેખણને પૂર્ણ પહોળાઈમાં બદલીશ અને પછી તેને મોટું કરીશ, અને તે મુજબ ફોકલ પોઇન્ટ પીકરને સંશોધિત કરીશ. હું અસ્પષ્ટતાને થોડી ઘાટી પણ બદલીશ. અને એકવાર આપણે તે કરી લઈએ, પછી આપણે આપણી કન્ટેન્ટ ઉમેરવાનું શરૂ કરી શકીએ છીએ. આ કિસ્સામાં, હું લોકોને 2022 માં કેટલાક ટોચના પ્રવાસ સ્થળોનો પરિચય કરાવવા જઈ રહ્યો છું. જેમ તમે નોંધ્યું હશે, તમે સાઇડબાર સેટિંગ્સમાં તમારા ટેક્સ્ટનું કદ બદલી શકો છો. પછી હું બટન્સ બ્લોક ઉમેરીશ. હું ટેક્સ્ટને બોલ્ડ, ટેક્સ્ટનો રંગ કાળો અને પૃષ્ઠભૂમિનો રંગ સફેદ કરીશ. પછી હું ત્રિજ્યા 100 કરીશ અને હું એક લિંક ઉમેરીશ.
આગળ, અમે મુલાકાતીઓને અમારી ટીમ સાથે પરિચિત કરાવવા માંગીએ છીએ, તેથી હું મીડિયા અને ટેક્સ્ટ બ્લોક ઉમેરીશ. સંરેખણને પૂર્ણ પહોળાઈમાં બદલ્યા પછી, અમે ડાબી બાજુએ છબી અને જમણી બાજુએ યોગ્ય માહિતી અને બટન ઉમેરશું. અમે અગાઉના ઉદાહરણોમાં જે રીતે પગલાં લીધા હતા, એ જ પ્રક્રિયા અનુસરીશું.
આગળ, હું કોલ-ટુ-એક્શન પેટર્ન દાખલ કરવા માંગુ છું, તેથી બ્રાઉઝ ઓલ પર ક્લિક કરો અને પછી પેટર્ન પર જાઓ. હું બટન પેટર્ન શોધવા જઈ રહ્યો છું અને એકવાર તમે પેટર્ન પર ક્લિક કરો, તે તરત જ તમારા પેજમાં ઉમેરાઈ જશે. અને હવે હું આગળ વધીને કન્ટેન્ટમાં ફેરફાર કરીશ. તમારા ન્યૂઝલેટર માટે સબ્સ્ક્રિપ્શન સેટ કરવું એ તમારા મુલાકાતીઓ સાથે જોડાવાનો અને સંપર્કમાં રહેવાનો એક વધુ સાર્થક માર્ગ છે. મેં ફક્ત લખાણ બદલી છે અને બટનમાં URL લિંક ઉમેરવાનું યાદ રાખ્યું છે.
છેલ્લે, હું છ છબીઓ ધરાવતો ગેલેરી બ્લોક ઉમેરવાનો છું. ખાતરી કરો કે લિસ્ટ વ્યૂમાં તમે પેરેન્ટ બ્લોક પસંદ કરો છો અને ગેલેરીમાં છ કોલમ દર્શાવા માટે સેટ કરો છો. પછી થોડી નીચે જાઓ અને બ્લોક સ્પેસિંગ શૂન્ય કરો. એકવાર તમે ગેલેરીને સંપૂર્ણ પહોળાઈમાં સંરેખિત કરો, ત્યારબાદ બધું તૈયાર છે. હવે જ્યારે હું નવા ટૅબમાં ‘પ્રિવ્યૂ’ પર ક્લિક કરીશ, ત્યારે હું મારી તૈયાર થયેલી હોમ પેજ જોઈ શકાશે જે બિલકુલ કોઈ પ્લગઇન કે કોડ વગર બનાવવામાં આવ્યું છે.
બ્લોક થીમનો ઉપયોગ કરીને તમારું પોતાનું હોમ પેજ અને વેબસાઇટ બનાવો, તેવી શુભકામનાઓ.