வேர்ட்பிரஸ் பயிற்சி: எப்படி ஒரு அற்புதமான பக்கம் திருப்பு சொருகி உருவாக்க

எழுதிய கட்டுரை:
  • உள் சந்தைப்படுத்தல்
  • புதுப்பிக்கப்பட்டது: செப் 9, 2003

குறிப்பு: ஆசிரியர் இனி எங்களுக்கு எழுதவில்லை நாம் இனி இந்த WP சொருகி ஆதரவு.

இன்று தொடங்கி, ஒவ்வொரு வாரம் நாம் ஒரு அற்புதமான குறியீட்டு பயிற்சி இடம்பெற வேண்டும், அடிப்படை பயன்படுத்தி மேம்பட்ட இருந்து, வேர்ட்பிரஸ் பயன்படுத்தி விருப்ப பொருட்களை எப்படி நீங்கள் கற்று. JS ஐ பயன்படுத்தி ஒரு "பக்கவிளைவு" கேலரியை உருவாக்க இன்று நாம் ஒரு சொருகி உருவாக்க வேண்டும் (எனவே இதை நீங்கள் அடிப்படை வழிமுறைகளைக் கற்றுக் கொள்ளலாம்).

உங்களுடைய ஆரம்ப வலை நாட்களில் ஒருவரை நான் பார்த்திருக்கிறேன், ஆனால் அவை பெரும்பாலும் ஃப்ளாஷ் பயன்படுத்தி செய்யப்பட்டன, இப்போது இது மிகவும் குறைவாக உள்ளது (அது இன்னும் அதன் மதிப்பைக் கொண்டுள்ளது, ஆனால் இது இனி இந்த வகையான சிறந்த விருப்பம் அல்ல).

அடிப்படை செயல்பாடு ஒரு புதிய உருவாக்கப்படும் கேலரி வகை சுருக்குக்குறியீடு வழியாக சில படங்கள் மற்றும் அவற்றின் அளவுகள் அடிப்படையில்.

நாம் தொடங்குவோம்!

ஜிப் & நிறுவவும்

அதை செயல்படுத்துவதில் சிறந்த வழி இது உங்களை நிறுவும். உன்னால் முடியும் இங்கே அதை பதிவிறக்க. நிறுவ மற்றும் சொருகி செயல்படுத்த, பின்னர் நீங்கள் செய்ய வேண்டும் அனைத்து இது போன்ற ஒரு பக்கம் சுருக்குக்குறியீடு சேர்க்க உள்ளது:

[flip_book ஐடிகள் = "" XX XX XX XX XX XX XX XX XX XX XX XX XX XX XII XII XIIX = "XX" display = "Double"]

விரைவு முன்னோட்டம்

நீங்கள் பெறும் விளைவு இது தான்:

Flipbook விளைவு

ஆனால் என்ன சூனியம் இருக்கிறது? சரி, அது உண்மையில் மிகவும் எளிது. இதைப் போன்ற ஒன்றை எவ்வாறு உருவாக்குவது என்பதை அறியலாம்.

தலைப்பு

முதலில் நீங்கள் ஒரு புதிய கோப்புறை மற்றும் ஒரு புதிய .php கோப்பை உருவாக்க வேண்டும். நீங்கள் ஒரு சோதனை சூழலை வைத்திருந்தால், இந்த கட்டத்தில் அது மிகச்சரியாக இருக்கும், எனவே நீங்கள் பொருட்களை உடைத்து சோதனை செய்யலாம்.

கோப்பு மற்றும் அடைவு ஒரு எளிய மற்றும் தனிப்பட்ட பெயர் வேண்டும், எனவே நீங்கள் இருக்கும் கூடுதல் முரண்பாடுகளை தவிர்க்க வேண்டும். எங்கள் கோப்பின் அடிப்படை உள்ளடக்கம் இதுபோன்ற ஒன்று:

/ * செருகுநிரல் பெயர்: FlipBook தொகுப்பு விவரம்: flipbook காட்சியகங்கள் ஒரு சுருக்குக்குறியீடு உருவாக்க. பதிப்பு: X ஆசிரியர்: வலை வருவாய் வலைப்பதிவு உரிமம்: GPL1.0 * /

அழகான எளிய, ஹ்ஹூ? நீங்கள் இந்த கோப்பு உருவாக்க நீங்கள் WP நிர்வாகம்> நிரல்கள் கீழ் பட்டியலில் உங்கள் சொருகி பார்க்க வேண்டும், மற்றும் நீங்கள் அதை செயல்படுத்த முடியும் (ஆனால் நீங்கள் மட்டும் உங்கள் கோப்பு இந்த உள்ளடக்கத்தை இருந்தால் அது நிறைய உங்கள் தளத்தில் மாற்ற மாட்டேன்).

அழைப்பு ஸ்கிரிப்ட்கள்

இப்போது நாம் இங்கே சில முக்கிய வெளி சொத்துக்களை சேர்க்க வேண்டும். அடிப்படை செயல்பாடுகளுக்கு தேவையான வெளிப்புற கோப்புகள்:

  • jQuery (1.9 +)
  • Turn.js ஸ்கிரிப்ட்
  • அடிப்படை ஸ்டைலிங் திரும்பவும்

நீங்கள் வெறுமனே ஸ்கிரிப்ட் மற்றும் பாணி குறிச்சொற்களை சேர்க்க என்றால் நீங்கள் சில பிரச்சினைகள் வேண்டும். உதாரணமாக, இரட்டை jQuery அழைப்பு ஒருவேளை உங்கள் தளத்தை உடைக்கும். வேறுபட்ட சொருகி மீண்டும் turn.js அழைப்புகள் அல்லது வேறு ஸ்டைலிங் உங்கள் தளத்தில் உடைக்க வேண்டும் என்றால், நீங்கள் அந்த பொருட்களை உருவாக்கிய அந்த "தன்னை" வேர்ட்பிரஸ் முடியாது.

அதனால் தான் எப்போதும் wp_enqueue_script மற்றும் wp_enqueue_style செயல்பாடுகளை பயன்படுத்த வேண்டும். இங்கே அடிப்படை பயன்பாடு:

function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('turn', plugins_url ('js / turn.js', __FILE__), வரிசை ('jquery'), '1.3', தவறான); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), தவறான '1.3', 'அனைத்தும்'); }

நாம் வெளிப்புற உருப்படிகளை X வெவ்வேறு வழிகளில் அழைக்கிறோம், இங்கே அவை:

  • ஏற்கனவே உள்ள உருப்படிக்கு அழைப்பு: jQuery - நாங்கள் வேர்ட்பிரஸ் ஏற்கனவே இந்த ஸ்கிரிப்ட் ஏற்ற என்று உறுதியாக இருந்தால் நாம் அளவுருக்கள் நிறைய கடக்க தேவையில்லை, நாம் தான் "டியூட், இந்த ஸ்கிரிப்ட் இங்கே இருக்க வேண்டும் இல்லையெனில் எங்கள் குறியீடு முடியாது வேலை "
  • ஒரு புதிய ஸ்கிரிப்ட் உருவாக்குதல் - நீங்கள் பெயர், கோப்பு இடம், தேவையான பொருட்கள் (இந்த வழக்கில் அது jQuery தேவைப்படுகிறது), பதிப்பு, மற்றும் அதை முடிப்பு அல்லது தலைப்பு (தவறான = தலைப்பு, உண்மை = முடிப்பு) ஏற்றப்பட்டால் போன்ற சில பண்புகளை கடக்க வேண்டும்
  • ஒரு புதிய பாணியை உருவாக்குதல் - கடந்த ஒரு கற்பனையிலேயே ஒரு சிறிய வித்தியாசத்தோடு, முன்னர் மிகச் சிறந்தது, இது ஊடக வகை இந்த பாணியில் இருந்தால்

வெளிப்புற ஸ்கிரிப்ட்டுகளை அழைக்கும்போது நீங்கள் கருத்தில் கொள்ள வேண்டிய முக்கிய விஷயங்களில் ஒன்று இந்த சொருகி சார்ந்து இருக்கும் குறியீட்டைக் கூடுதலாக இருந்தால். இது உங்கள் கோப்பு தலைப்பு அல்லது அடிக்குறிப்பில் அழைக்கப்படும் என்றால் என்ன அடிப்படையில் வரையறுக்கிறது.

எங்களது விஷயத்தில், சில கூடுதல் ஸ்கிரிப்டுகள் கேலரி அமைக்கப்படும்போது மட்டுமே அதன் HTML உருவாக்கம் செய்யப்படும், மேலும் உடலில் சேர்க்கப்படும். இதுதான் இந்த ஸ்கிரிப்டை தலையில் சேர்க்க வேண்டும், இல்லையென்றால் எங்கள் குறியீடு "டர்ன்" செயல்பாடு இன்னும் இல்லையென்றால்.

இந்த நல்ல குறியீடு பிறகு நாங்கள் ஸ்கிரிப்டை அந்த ஏற்ற வேர்ட்பிரஸ் சொல்ல வேண்டும், நடவடிக்கை "wp_enqueue_scripts" இதை செய்வேன்:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

சுருக்குக்குறியீடு

சுருக்குக்குறியீடு உருவாக்க நடவடிக்கை ஆரம்பிக்கலாம். இது மிகவும் எளிது, நீங்கள் சுருக்குக்குறியீடு தூண்டுதல் சேர்க்க வேண்டும், மற்றும் செயல்படுத்தும் செயல்பாடு:

add_shortcode ( "flip_book", "create_flip_book");

இப்போது எங்கள் செயல்பாட்டை உருவாக்க வேண்டும் மற்றும் எங்கள் பண்புகளை பெற வேண்டும். ஆனால் சில பண்புக்கூறுகள் விருப்பமாக இருக்கக்கூடும், இதன் அர்த்தம் அவர்களுக்கு இயல்புநிலை மதிப்புகளை உருவாக்க வேண்டும். பண்புக்கூறு காலியாக இருந்தால், நிறைய சோதனைகளை உருவாக்கலாம், ஆனால் இது வழக்கமான அழைப்பானதை விட மென்மையான செயல்பாடு சிறந்ததாக இருக்கும் நிகழ்வுகளில் ஒன்றாகும்.

நேரடியாக மாறுபடும் மதிப்புகளில் அறிக்கைகள் என்றால் முரண் இயக்கங்கள் உள்ளன. இந்த அமைப்பு பின்வருமாறு:

$ மாறி = (CONDITION)? "VALUE IF நிபந்தனை TRUE": "VALUE IF நிபந்தனை தவறானது";

எங்கள் செயல்பாட்டின் முதல் பகுதியில் நீங்கள் அவற்றைப் பார்க்க முடியும்:

function create_flip_book ($ attr) {// ஐஎஸ்ஸை செயல்முறை செய்ய தயாராகிறது $ வரிசை ['ஐடிகள்'] = வெடி ("" $ attr ['ஐடிகள்']); // காட்சி முறை $ வரிசை ['காட்சி'] = வெற்று ($ attr ['காட்சி'])? "ஒற்றை": $ attr ['காட்சி']; // நிலையான மதிப்பு // அகலம் $ வரிசை ['அகலம்'] = வெற்று ($ attr ['அகலம்'])? 400: $ attr ['அகலம்']; // உயரம் $ வரிசை ['உயரம்'] = வெற்று ($ attr ['உயரம்'])? 300: $ attr ['உயரம்'];
    // HTML மற்றும் குறியீட்டு எஞ்சின் இங்கு செல்கிறது}

பின்னர் நாம் HTML ஐ உருவாக்க வேண்டும், மேலும் எங்கள் படங்களுக்கான அடிப்படை அழைப்பு. இங்கே மற்றொரு முக்கியமான விஷயம் என்னவென்றால், நாம் பத்திரிகை பாணியைப் பயன்படுத்துகிறீர்களானால் அளவை சரிசெய்வது (இது ஒரு அகலத்திற்கு 2x ஆக இருக்க வேண்டும், ஏனென்றால் ஒன்றுக்கு பதிலாக 2 படங்கள் இருக்கும்):

<? php என்றால் ($ வரிசை ['காட்சி'] == "இரட்டை") {$ வரிசை ['அகலம்'] = $ வரிசை ['அகலம்'] * 2; } $ I = x <X $ X $ X $ X $ X $ X $ X $ X <X $ X $ X $ X $ X $ X $ X $ X $ X $ நான் $ ($ நான் + +) div> <? php echo wp_get_attachment_image ($ வரிசை ['ஐடிகள்'] [$ i], 'முழு'); ($ array ['display'] == "ஒற்றை") {?> <span> <? = "" ($ i + 0)?> / <? ($ அரை ['ஐடிகள்'])?> </ span> <? php} வேறு {?> <spanright ":" இடது ");?>"> <? php echo " நான் + 1)?> / <? எதிரொலி "" ". சைஸ்அஃப் ($ வரிசை ['ஐடிகள்']); </ div>> <? php}?> </ div> <ஸ்கிரிப்ட் வகை = "உரை / ஜாவாஸ்கிரிப்ட்"> jQuery ("# ​​flipbook"). ({width: ? php echo $ array ['அகலம்'];?>, உயரம்: <? php echo $ array ['height'];?>, autoCenter: true, display: '<php echo $ array [' display ']; ?> ', // ஒற்றை பக்கம் அல்லது இரட்டை பக்கம் முடுக்கம்: உண்மை, சாய்வு:! jQuery.isTouch,}); </ ஸ்கிரிப்ட்>

நீங்கள் என்ன நினைக்கிறீர்கள்?

நீங்கள் விரும்பியவாறு இப்போது மாற்றங்களைச் செய்யலாம், மேலும் விருப்பங்களைச் சேர்க்கலாம் (மேலும் உற்சாகத்திற்கான அவர்களின் அருமையான உதாரணங்களைப் பார்க்கவும்), உங்களுக்கு வேலை செய்யாதது அல்லது மற்ற கூடுதல் இணைப்புகளை இணைத்தல் ஆகியவற்றைச் சேர்க்கலாம்.

நீங்கள் இன்னும் சிறிது கற்றுக்கொள்ள வேண்டும் எந்த வேர்ட்பிரஸ் கருத்து உள்ளது? ஒருவேளை நீங்கள் என்ன செய்ய வேண்டுமென்று கற்றுக் கொள்ள வேண்டும்? கருத்துகள் வழியாக எங்களுக்கு தெரியப்படுத்துங்கள், எதிர்கால இடுகையில் இதை சேர்க்க நாங்கள் மகிழ்வோம்!

ரோசெஸ்டர் ஒலிவேரா பற்றி

நான் இன்ஜபுபா (எம்.ஜி.), பிரேசிலில் இருந்து ஒரு வலை வடிவமைப்பாளர் மற்றும் தொழில் முனைவர். நான் முட்டாள்தனமான தலைப்புகள் பற்றி எழுதும் சில நல்ல விஷயங்களை செய்வதை விரும்புகிறேன்.

நான்"