વર્ડપ્રેસ ટ્યુટોરિયલ: એક અદ્ભુત પેજમાં ફ્લિપ પ્લગઇન કેવી રીતે બનાવવી

લેખ દ્વારા લખાયેલ:
  • ઈનબાઉન્ડ માર્કેટિંગ
  • સુધારાશે: સપ્ટે 15, 2014

નોંધ: હવે અમે આ WP પ્લગઇનને સમર્થન આપતા નથી કારણ કે લેખક હવે અમારા માટે લખી રહ્યું નથી.

આજેથી શરૂ કરીને, દર અઠવાડિયે અમે તમને અદ્ભુત કોડિંગ ટ્યુટોરિયલ બતાવીશું, મૂળભૂતથી અદ્યતન સુધી, WordPress નો ઉપયોગ કરીને કસ્ટમ સામગ્રી કેવી રીતે કરવી તે તમને શીખવીશું. જેએસનો ઉપયોગ કરીને, "પૃષ્ઠ ફ્લિપ" ગેલેરી બનાવવા માટે આજે અમે એક પ્લગઇન (તેથી તમે આના પરનાં મૂળભૂત પગલાંઓ શીખીશું) બનાવીશું.

હું વિશ્વાસ કરું છું કે તમે તમારા પ્રારંભિક વેબ દિવસોમાં તેમાંથી એક જોયું છે, પરંતુ તે મોટેભાગે ફ્લેશનો ઉપયોગ કરીને કરવામાં આવ્યાં હતાં, જે હવે ખૂબ નાપસંદ થઈ ગયું છે (તે હજી પણ તેનું મૂલ્ય ધરાવે છે, પરંતુ તે આ પ્રકારની વસ્તુ માટે હવે શ્રેષ્ઠ વિકલ્પ નથી).

મૂળભૂત કાર્યક્ષમતા નવી બનાવશે ગેલેરી પ્રકાર Shortcode મારફતે, થોડા છબીઓ અને તેમના કદ પર આધારિત છે.

ચાલો પછી પ્રારંભ કરીએ!

ઝિપ અને ઇન્સ્ટોલ કરો

ક્રિયામાં તેને જોવાનો શ્રેષ્ઠ રસ્તો તે જાતે જ ઇન્સ્ટોલ કરી રહ્યું છે. તમે કરી શકો છો તેને અહીં ડાઉનલોડ કરો. પ્લગઇનને ઇન્સ્ટોલ અને સક્રિય કરો, પછી તમારે જે કરવું પડશે તે પૃષ્ઠમાં શોર્ટકોડ ઉમેરવાનું છે, આની જેમ:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" પહોળાઈ = "300" ઊંચાઇ = "225" પ્રદર્શન = "ડબલ"]

ઝડપી પૂર્વદર્શન

અને આ પ્રકારનું પરિણામ છે જે તમને મળશે:

ફ્લિપબુક અસર

પરંતુ ત્યાં કાળા જાદુ કેવી રીતે જાય છે? સારુ, તે વાસ્તવમાં ખૂબ સરળ છે. ચાલો શીખીએ કે આ કઈ રીતે બનાવવું.

હેડર

સૌ પ્રથમ તમારે નવું ફોલ્ડર અને નવી .php ફાઇલ બનાવવાની જરૂર પડશે. જો તમારી પાસે પરીક્ષણ વાતાવરણ હોય તો આ બિંદુએ તે અદ્ભુત હશે, જેથી તમે સામગ્રીને તોડી અને ચકાસી શકો.

ફાઇલ અને ફોલ્ડરમાં એક સરળ અને અનન્ય નામ હોવું જોઈએ, જેથી તમે અસ્તિત્વમાંના પ્લગિન્સ સાથે સંઘર્ષ ટાળશો. પછી અમારી ફાઇલની મૂળભૂત સામગ્રી આના જેવી છે:

/ * પ્લગઇન નામ: ફ્લિપબુક ગેલેરી વર્ણન: ફ્લિપબુક ગેલેરીઓ માટે એક shortcode બનાવો. સંસ્કરણ: 1.0 લેખક: વેબ આવક બ્લોગ લાઇસેંસ: GPL2 * /

ખૂબ સરળ, હૂ? એક વાર તમે આ ફાઇલ બનાવી લો તે પછી તમે WP એડમિન> પ્લગઇન્સ હેઠળ સૂચિમાં તમારી પ્લગઇન જોશો અને તમે તેને સક્રિય કરી શકો છો (પરંતુ જો તમારી પાસે ફક્ત તમારી ફાઇલમાં આ સામગ્રી હશે તો તે તમારી સાઇટને બદલશે નહીં).

સ્ક્રિપ્ટો પર કૉલ કરો

હવે આપણે અહીં કેટલીક અગત્યની બાહ્ય સંપત્તિ શામેલ કરવાની જરૂર છે. મૂળભૂત કાર્યક્ષમતા માટે જરૂરી બાહ્ય ફાઇલો છે:

  • jQuery (1.9 +)
  • Turn.js સ્ક્રિપ્ટ
  • મૂળભૂત સ્ટાઇલ ચાલુ કરો

જો તમે સરળતાથી સ્ક્રિપ્ટ અને સ્ટાઇલ ટૅગ્સ ઉમેરો છો, તો તમને કેટલીક સમસ્યાઓ પડશે. ઉદાહરણ તરીકે, ડબલ jQuery કૉલ કદાચ તમારી સાઇટને તોડી નાખશે. ઉપરાંત, વર્ડપ્રેસ પોતે "તે" બનાવશે નહીં કે તમે તે આઇટમ્સ બનાવી છે, તેથી જો કોઈ અલગ પ્લગિન ફરીથી ચાલુ કરે અથવા ફરીથી જુદી જુદી સ્ટાઇલ કરે, તો તે તમારી સાઇટને તોડશે.

તેથી આપણે હંમેશાં wp_enqueue_script અને wp_enqueue_style કાર્યોનો ઉપયોગ કરવો જોઈએ. અહીં મૂળભૂત વપરાશ છે:

કાર્ય પ્લગઇન (સ્ક્રિપ્ટો) wp_enqueue_script ('ટર્ન', પ્લગિન્સ_રલ ('જેએસ / ટર્ન.જેએસ', __FILE__), એરે ('jquery'), '1.3', ખોટું); wp_enqueue_style ('ટર્નસીએસએસ', પ્લગિન્સ_રલ ('CSS / style.css', __FILE__), ખોટું, '1.3', 'બધા'); }

અમે બાહ્ય વસ્તુઓને 3 માં અલગ અલગ રીતે બોલાવી રહ્યા છીએ, અહીં તેઓ છે:

  • અસ્તિત્વમાંની વસ્તુને કૉલ કરવું: jQuery - જો અમને ખાતરી છે કે WordPress પહેલેથી જ આ સ્ક્રીપ્ટને લોડ કરે છે, તો આપણે ઘણા પરિમાણો પસાર કરવાની જરૂર નથી, અમે ફક્ત તેને કહી રહ્યા છીએ "ડ્યૂડ, આ સ્ક્રીપ્ટ અહીં હોવી આવશ્યક છે અન્યથા અમારું કોડ નહીં કામ "
  • નવી સ્ક્રીપ્ટ બનાવવી - તમારે નામ, ફાઇલ સ્થાન, આવશ્યક આઇટમ્સ (આ કિસ્સામાં તેને jQuery ની જરૂર છે), સંસ્કરણ, અને જો તે ફૂટર અથવા હેડર (ખોટું = હેડર, સાચું = ફૂટર) માં લોડ થયેલ છે તે કેટલાક લક્ષણો પસાર કરવાની જરૂર પડશે.
  • નવી શૈલી બનાવવી - પાછલા એક જેટલું જ, જે છેલ્લા લક્ષણમાં નાનો તફાવત છે, તે કહે છે કે મીડિયા આ શૈલીને કેવી રીતે ટાઇપ કરે છે

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

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

આ સરસ કોડ પછી, અમને તેને સ્ક્રિપ્ટો તરીકે લોડ કરવા માટે WordPress ને કહેવાની જરૂર છે, ક્રિયા "wp_enqueue_scripts" આ કરશે:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

શોર્ટકોડ

ચાલો shortcode બનાવવા માટે ક્રિયા સાથે પ્રારંભ કરીએ. તે ખૂબ જ સરળ છે, તમારે ફક્ત શોર્ટકોડ ટ્રિગર અને ફંકશનને અમલમાં મૂકવાની જરૂર છે:

add_shortcode ("flip_book", "create_flip_book");

હવે આપણે આપણા ફંક્શનને બનાવવાની અને આપણા લક્ષણો મેળવવાની જરૂર છે. પરંતુ કેટલાક લક્ષણો વૈકલ્પિક હોઈ શકે છે, જેનો અર્થ એ છે કે તેમને માટે ડિફૉલ્ટ મૂલ્યો બનાવવાની જરૂર પડશે. જો ગુણધર્મ ખાલી હોય તો અમે ત્યાં ઘણા બધા પરીક્ષણો બનાવી શક્યા હોત, પરંતુ આ તે કિસ્સાઓમાંનું એક છે જ્યાં કૉલ કરવા પર નિયમિત કામગીરી કરતાં વધુ સારી કામગીરી હોય.

ટર્નીરી ઓપરેશન્સ પ્રકારની હોય છે, જો વેરિયેબલના મૂલ્યમાં સીધી નિવેદનો હોય. જો આ માળખું અનુસરે છે:

$ ચલ = (શરત)? "VALUE જો શરત સાચું છે": "VALUE જો શરત ખોટું છે";

તમે અમારા કાર્યના પહેલા ભાગમાં તેમને ક્રિયામાં જોઈ શકો છો:

ફંક્શન create_flip_book ($ attr) {// $ એરેની પ્રક્રિયા કરવા માટે આઇડી તૈયાર કરી રહ્યા છે ['ids'] = વિસ્ફોટ ("", $ attr ['ids']); // પ્રદર્શન મોડ $ એરે ['ડિસ્પ્લે'] = ખાલી ($ attr ['display'])? "સિંગલ": $ એટ્ર ['ડિસ્પ્લે']; // માનક મૂલ્ય // પહોળાઈ $ એરે ['પહોળાઈ'] = ખાલી ($ એટ્ર ['પહોળાઈ'])? 400: $ એટઆર ['પહોળાઈ']; // ઊંચાઈ $ એરે ['ઊંચાઇ'] = ખાલી ($ એટ્ર ['ઊંચાઇ'])? 300: $ એટઆર ['ઊંચાઇ'];
    // એચટીએમએલ અને બાકીનો કોડ અહીં જાય છે}

પછી આપણે HTML અને અમારી છબીઓ માટેનો મૂળ ક callલ બનાવવાની જરૂર પડશે. અહીં બીજો મહત્વનો મુદ્દો એ છે કે જો આપણે મેગેઝિન શૈલીનો ઉપયોગ કરી રહ્યાં હોઈએ તો કદને સમાયોજિત કરવા માટે (તે પહોળાઈ 2x હોવી જોઈએ કારણ કે અમારી પાસે એકની જગ્યાએ 2 છબીઓ હશે):

<? php if ($ array ['display'] == "double") {$ array ['width'] = $ array ['width'] * xNUMX; } // એચટીએમએલ, જેએસ અને બ્લેક મેજિક?> <Div id = "flipbook"> <? Php ($ i = 2; $ i <sizeof ($ array] 'ids']; $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ એરે ['ids'] [$ i], 'સંપૂર્ણ'); જો ($ એરે ['ડિસ્પ્લે'] == "સિંગલ") {?> <span> <? = "" ($ i + 0)?> / <? echo ".sizeof ($ array ['ids'])?> </ span> <? php} else {?> <spanright": "left");?> "> <? php echo" "($ હું + 1)?> / <? echo "" .sizeof ($ એરે ['ids']); ?> </ span> <? php}?> </ div> <? php}?> </ div> <સ્ક્રિપ્ટ પ્રકાર = "ટેક્સ્ટ / જાવાસ્ક્રિપ્ટ"> jQuery ("# ​​ફ્લિપબુક"). ({width: < ? php echo $ array ['width'];?>, ઊંચાઈ: <? php echo $ array ['height'];?>, autoenter: true, display: '<? php echo $ array [' display ']; ?> ', // એક પૃષ્ઠ અથવા ડબલ પૃષ્ઠ પ્રવેગક: સાચું, ઘટકો:! jQuery.isTouch,}); </ script>

તમે શુ વિચારો છો, તમને શુ લાગે છે?

હવે તમે ઇચ્છો તે પ્રમાણે તમે તેને બદલી અને સંશોધિત કરી શકો છો, વધુ વિકલ્પો ઉમેરી રહ્યા છે (વધુ પ્રેરણા માટેના તેમના અદ્ભુત ઉદાહરણો તપાસો), તમારા માટે શું કામ કરતું નથી તે ગોઠવવું, અથવા અન્ય પ્લગિન્સ સાથે આને સંયોજિત કરવું.

શું તમારી પાસે કોઈ WordPress ખ્યાલ છે જે તમે થોડી વધુ જાણવા માંગો છો? કદાચ કંઈક તમે કેવી રીતે કરવું તે જાણવા માંગો છો? અમને ટિપ્પણીઓ દ્વારા જણાવો અને ભાવિ પોસ્ટમાં આ શામેલ કરવામાં અમને આનંદ થશે!

રોચેસ્ટર ઓલિવિરા વિશે

હું ઇટાજુબા (એમજી), બ્રાઝિલથી વેબ ડિઝાઇનર અને ઉદ્યોગસાહસિક છું. હું અસ્પષ્ટ મુદ્દાઓ વિશે લખવા અને કેટલીક સરસ સામગ્રી કરવા વિશે લખું છું.

જોડાવા:

n »¯