உள்ளடக்கம்
- வேர்ட்பிரஸ் மற்றும் “திரவ படங்கள்” சிக்கல்
- JQuery அல்லாத தீர்வு
- குறியீடு
- ஒரு ஒப்புதல் வாக்குமூலம்
- கேவியட்ஸ்
- அறிவு தேவை: அடிப்படை PHP மற்றும் CSS
- தேவை: வேர்ட்பிரஸ் நிறுவல், தேர்வு உரை திருத்தி
- திட்ட நேரம்: 10 நிமிடங்கள்
.Net பத்திரிகையின் அச்சு பதிப்பிற்கு நீங்கள் குழுசேர்ந்தால் (இல்லையென்றால், ஏன் இல்லை!?), இந்த மாத இதழில் “வேர்ட்பிரஸ் உடன் பொறுப்பு வடிவமைப்பு” குறித்த சிறந்த கட்டுரை இடம்பெறுவதை நீங்கள் பார்த்திருப்பீர்கள்.
கட்டுரையில், எழுத்தாளர் ஜெஸ்ஸி ப்ரீட்மேன் உண்மையிலேயே பயனுள்ள பதிலளிக்கக்கூடிய வலைத்தளத்தை உருவாக்குவதற்காக, உள்ளார்ந்த வேர்ட்பிரஸ் செயல்பாட்டை அதிகமாகவும், முறியடிக்கவும் மிகவும் பயனுள்ள நுட்பங்களை கோடிட்டுக் காட்டுகிறார். வேர்ட்பிரஸ் உடன் பதிலளிக்கக்கூடிய தளத்தை உருவாக்க நீங்கள் நினைத்தால், நிச்சயமாக அவருடைய கட்டுரையின் நகலை எடுக்க வேண்டும். இது கட்டாயம் படிக்க வேண்டியது.
பதிலளிக்கக்கூடிய, மொபைல் முதல் அணுகுமுறையைப் பயன்படுத்தி சமீபத்தில் எனது தனிப்பட்ட வலைப்பதிவை வேர்ட்பிரஸ் இல் மீண்டும் கட்டியெழுப்பியதால், கட்டுரையில் உள்ளடக்கப்பட்ட சில நுட்பங்களை நான் அறிந்தேன். எவ்வாறாயினும், jQuery வழியாக திரவப் படங்களை இயக்குவதற்கான ஜெஸ்ஸியின் அணுகுமுறையே எனக்கு மிகவும் பிடித்தது.
வேர்ட்பிரஸ் மற்றும் “திரவ படங்கள்” சிக்கல்
அதிகபட்ச அகலத்தைப் பயன்படுத்துகின்ற ‘திரவப் படங்கள்’ - 100% - நீங்கள் அனைவரும் அறிந்திருப்பதை நான் உறுதியாக நம்புகிறேன் - படங்கள் அவற்றின் கொள்கலனின் அளவை அளவிடக்கூடிய வகையில் நிலையான அகலம் அல்லது உயரம் இல்லை. துரதிர்ஷ்டவசமாக, வேர்ட்பிரஸ் தானாக மீடியா நூலகத்திலிருந்து உருவாக்கப்படும் படங்களின் பரிமாணங்களைக் கணக்கிடுகிறது மற்றும் எந்த img> குறிச்சொற்களுக்கும் தொடர்புடைய அகலம் மற்றும் உயர பண்புகளை சேர்க்கிறது.
பக்க ஒழுங்கமைவு வேகத்திற்கு இது சிறந்தது, ஆனால் அது ஒரு வீசுகிறது பாரிய பட பரிமாணங்கள் அவற்றின் கொள்கலனின் அளவிற்கு இனி கட்டுப்படுத்தப்படாததால், பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்கும்போது படைப்புகளில் ஸ்பேனர்.
இது ஒரு சிக்கல்.
JQuery அல்லாத தீர்வு
ஜெஸ்ஸி தனது கட்டுரையில், jQuery ஐப் பயன்படுத்தி பக்கத்தின் அனைத்து img> குறிச்சொற்களிலிருந்தும் அகல மற்றும் உயர பண்புகளை நீக்கியவுடன் அதை நீக்குகிறது. இது நிச்சயமாக வேலை செய்யும், ஆனால் எனது தளத்தை உருவாக்கும் போது இதை அடைய ஜாவாஸ்கிரிப்டை நம்புவதற்கான யோசனை எனக்குப் பிடிக்கவில்லை, குறிப்பாக கேள்விக்குரிய பக்கத்தில் நிறைய படங்கள் இருந்தால்.
வேர்ட்பிரஸ் வடிப்பான்கள் மீட்புக்கு வந்த இடம் இது.
வேர்ட்பிரஸ் கோடெக்ஸ் ஒரு வடிப்பானை இவ்வாறு வரையறுக்கிறது:
"... தரவுத்தளத்தில் சேர்ப்பதற்கு முன்பு அல்லது உலாவி திரைக்கு அனுப்புவதற்கு முன்பு பல்வேறு வகையான உரையை மாற்றுவதற்கு வேர்ட்பிரஸ் தொடங்கும் கொக்கிகள்."
இது மாறும் போது இது நமக்குத் தேவையானது. அனைத்து படங்களையும் பக்கத்தில் காண்பிப்பதற்கு முன்பு இறுதி செயலாக இயக்க ஒரு வடிப்பானை அமைப்பதன் மூலம், அகலம் மற்றும் உயர பண்புகளை அகற்ற PHP ஐப் பயன்படுத்தலாம், இதன் மூலம் ஜாவாஸ்கிரிப்ட் வழியாக (சாத்தியமான) விலையுயர்ந்த DOM கையாளுதலின் தேவையைத் தவிர்க்கலாம்.
குறியீடு
- /**
- * பதிலளிக்கக்கூடிய பட செயல்பாடுகள்
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- செயல்பாடு remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (அகலம்
மேலே உள்ள குறியீட்டில், add_filter செயல்பாட்டைப் பயன்படுத்தி இரண்டு வடிப்பான்களைச் சேர்க்கிறோம். முதல் வாதம் நாம் இணைக்க விரும்பும் வடிகட்டி மற்றும் இரண்டாவது வடிப்பான் அழைக்கப்படும் போது நாம் இயக்க விரும்பும் செயல்பாட்டைக் குறிப்பிடுகிறது.
எங்கள் குறியீட்டில் நாம் இரண்டு தெளிவற்ற செயல்பாடுகளை இணைக்கிறோம்:
- post_thumbnail_html - படங்கள் மீட்டெடுக்கப்பட்டன post_thumbnail ()
- image_send_to_editor - படங்கள் எடிட்டரில் சேர்க்கப்பட்டன
படக் குறிச்சொற்களிலிருந்து அகலம் மற்றும் உயர பண்புக்கூறுகள் இரண்டையும் அகற்ற வழக்கமான வெளிப்பாட்டைப் பயன்படுத்துகிறோம். இப்போது எங்கள் படங்கள் உலாவிக்கு அனுப்பப்படும் போது அவை திரு மார்கோட் சொன்னதைப் போலவே அவை முழுமையாக ‘திரவமாக’ இருக்க முடியும்.
ஒரு ஒப்புதல் வாக்குமூலம்
பயன்படுத்த எண்ணம் இருந்ததை நான் ஒப்புக் கொள்ள வேண்டும் add_filter என்னால் செய்ய முடியாத பண்புகளை அகற்ற, சரியான வேர்ட்பிரஸ் வடிப்பான்களைக் கண்டுபிடிப்பேன்.
நிறைய தேடல்களுக்குப் பிறகு, நதானியேல் டெய்ன்டரின் வேர்ட்பிரஸ் ஸ்டேக் எக்ஸ்சேஞ்சில் இந்த மிகவும் பயனுள்ள இடுகையை நான் கண்டேன், இது எனக்குத் தேவையான இரண்டு வடிப்பான்களைப் பற்றிய தகவல்களை வழங்கியது.
கேவியட்ஸ்
எனக்குத் தெரிந்தவரை, இந்த அணுகுமுறையின் ஒரே பெரிய இழுப்பு என்னவென்றால், அது உங்கள் தளத்தின் எல்லா படங்களிலிருந்தும் அகலம் மற்றும் உயர பண்புகளை அகற்றாது. இது ஒரு சிக்கலாக நான் கண்டேன், குறிப்பாக கருத்துக்களில் வேர்ட்பிரஸ் பயன்படுத்தும் கிராவடார் படங்களுடன்.
இந்த பிரச்சினைக்கு யாரிடமாவது தீர்வு இருந்தால் தயவுசெய்து ஒரு கருத்தை இடுங்கள், எனவே நாம் அனைவரும் பயனடையலாம்.
வேர்ட்பிரஸ் வலைத்தளங்களில் "திரவ படங்களை" செயல்படுத்த ஜாவாஸ்கிரிப்டை நம்புவதற்கு மாற்றாக இது பயனுள்ளதாக இருக்கும் என்று நம்புகிறேன்.
வார்த்தைகள்: டேவிட் ஸ்மித்
டேவ் ஸ்மித் இங்கிலாந்தின் அழகிய நகரமான பாத் அருகே அமைந்துள்ள முன் இறுதியில் வடிவமைப்பாளர் ஆவார். அவர் புதிய மற்றும் அற்புதமான வலைத் திட்டங்களில் பணியாற்றாதபோது, பிக் பேண்ட் ஜாஸ் குழுக்கள் முதல் சிம்பொனி இசைக்குழுக்கள் வரை அனைத்திலும் அவர் எக்காளம் வாசிப்பதைக் காணலாம். ட்விட்டரில் டேவை @get_dave எனப் பிடிக்கலாம்.
