WordPress-ലെ wptexturize ഫിൽട്ടർ ഇൻലൈൻ JavaScript-നെ നിശബ്ദമായി നശിപ്പിക്കുന്നു; ഇത് ലോജിക്കൽ && ഓപ്പറേറ്ററിനെ HTML എൻ്റിറ്റി ആയ && ആക്കി മാറ്റുകയും ഷോർട്ട്കോഡുകൾക്കുള്ളിൽ പ്രവർത്തിക്കുന്ന സ്ക്രിപ്റ്റുകൾ തകരാറിലാക്കുകയും ചെയ്യുന്നു.
കാൽക്കുലേറ്റർ ഷോർട്ട്കോഡുകൾ കൈകാര്യം ചെയ്യുന്ന ഒരു ഡെവലപ്പർക്കാണ് ഈ പ്രശ്നം നേരിട്ടത്. ആഴ്ചകളോളം കൃത്യമായി പ്രവർത്തിച്ചതിന് ശേഷം, സബ്മിറ്റ് ബട്ടണുകൾ പ്രവർത്തിക്കാതായി. PHP വാർണിംഗുകളോ കൺസോൾ എററുകളോ ഉണ്ടായിരുന്നില്ല, ഇൻസ്പെക്റ്റ് ചെയ്തപ്പോൾ HTML-ഉം കൃത്യമായിരുന്നു—എന്നാൽ റെൻഡർ ചെയ്ത സോഴ്സ് പരിശോധിച്ചപ്പോൾ if (!isNaN(bf) && bf > 0) എന്ന് കാണിച്ചു. ഈ ഒരു സിന്റാക്സ് എറർ കാരണം മുഴുവൻ സ്ക്രിപ്റ്റ് ബ്ലോക്കും പ്രവർത്തിക്കാതെയായി.
ഈ ഫിൽട്ടർ പ്രധാനമാകുന്നത് എന്തുകൊണ്ട്
ബ്രൗസറിലേക്ക് എത്തുന്നതിന് മുമ്പ് WordPress പോസ്റ്റ് ഉള്ളടക്കത്തെ ഒരു കൂട്ടം ഫിൽട്ടറുകളിലൂടെ കടത്തിവിടുന്നു. അവയിൽ ആദ്യത്തേതാണ് wptexturize; ഇത് സാധാരണമായ കോട്ട് മാർക്കുകളെ (straight quotes) ടൈപ്പോഗ്രാഫിക് കർളി കോട്ടുകളായും (curly quotes), ഒന്നിലധികം ഹൈഫനുകളെ എം-ഡാഷുകളായും (em-dashes) മാറ്റുന്നു, കൂടാതെ ആംപേഴ്സാന്റുകളെ (ampersands) ക്ലീൻ ചെയ്യുന്നു. ഈ ഫിൽട്ടർ കൈകാര്യം ചെയ്യുന്നത് സാധാരണ എഴുത്തുകളെ (prose) ആണെന്നും കോഡിനെയല്ല എന്നുമാണ് കരുതുന്നത്. ഒരു ഷോർട്ട്കോഡ് ഉപയോഗിച്ച് ഇൻലൈൻ <script> ടാഗ് ഉൾപ്പെടുത്തുമ്പോൾ, ഫിൽട്ടർ അത് സാധാരണ ടെക്സ്റ്റ് ആയി കണ്ട് പ്രവർത്തിക്കുന്നു. അതിനാൽ &&-ലെ ആംപേഴ്സന്റ് & ആയി മാറുന്നു, ഇത് ബ്രൗസർ ഒരു ലോജിക്കൽ AND ഓപ്പറേറ്റർ ആയി കാണുന്നതിന് പകരം ഒരു സാധാരണ സ്ട്രിംഗ് ആയിട്ടാണ് കണക്കാക്കുന്നത്.
പോസ്റ്റ് ഉള്ളടക്കത്തിൽ നേരിട്ട് JavaScript ഉൾപ്പെടുത്തുന്ന ഡെവലപ്പർമാർ—കാൽക്കുലേറ്ററുകൾ, ഫോം വാലിഡേറ്ററുകൾ, ഇന്ററാക്ടീവ് വിഡ്ജറ്റുകൾ എന്നിവ—ഇത് ബാധിക്കപ്പെട്ടവരാണ്. ഈ പ്രശ്നം കാൽക്കുലേറ്ററുകളിൽ മാത്രം പരിമിതമല്ല; &&, & അല്ലെങ്കിൽ സമാനമായ ക്യാരക്ടറുകൾ ഉപയോഗിക്കുന്ന ഏതൊരു ഇൻലൈൻ സ്ക്രിപ്റ്റും തകരാറിലാകാം. ഈ മാറ്റം സെർവർ സൈഡിൽ സംഭവിക്കുന്നതിനാൽ, ബ്രൗസർ ഒരിക്കലും യഥാർത്ഥ കോഡ് കാണുന്നില്ല, അതിനാൽ സാധാരണമായ ഒരു JavaScript എക്സെപ്ഷൻ ആയി ഈ എറർ പുറത്തുവരുന്നില്ല.
ആരെയാണ് ഇത് ബാധിക്കുന്നത്, അവർക്ക് എന്ത് നഷ്ടപ്പെടുന്നു
- സൈറ്റ് ഉടമകൾ: തകരാറിലായ ഒരു കാൽക്കുലേറ്ററോ ഫോമോ സന്ദർശകരെ നിരാശപ്പെടുത്തുകയും, ബൗൺസ് റേറ്റ് വർദ്ധിപ്പിക്കുകയും, വിശ്വാസ്യത കുറയ്ക്കുകയും ചെയ്യാം.
- ഡെവലപ്പർമാർ: ലോഗുകളിലോ കൺസോൾ ഔട്ട്പുട്ടിലോ യാതൊരു സൂചനയും നൽകാത്ത "ഗോസ്റ്റ്" ബഗുകൾ (ghost bugs) കണ്ടെത്താൻ മണിക്കൂറുകൾ പാഴാക്കേണ്ടി വരുന്നു.
- കണ്ടന്റ് എഡിറ്റർമാർ: ഷോർട്ട്കോഡുകൾ അടങ്ങിയ പേജുകൾ എഡിറ്റ് ചെയ്യുമ്പോൾ അറിയാതെ തന്നെ ഫംഗ്ഷണാലിറ്റി തകരാറിലാക്കിയേക്കാം.
ഇതിന്റെ നഷ്ടം വെറും സമയമല്ല; വിലനിർണ്ണയം, ലോൺ എസ്റ്റിമേറ്റുകൾ അല്ലെങ്കിൽ ആരോഗ്യ പരിശോധനകൾ എന്നിവയ്ക്കായി കസ്റ്റം കാൽക്കുലേറ്ററുകളെ ആശ്രയിക്കുന്ന സൈറ്റുകളിൽ ഇത് കൺവേർഷനുകൾ നഷ്ടപ്പെടാൻ കാരണമായേക്കാം.
ഈ ഫിൽട്ടർ ലളിതമായി പറഞ്ഞാൽ എന്താണ് ചെയ്യുന്നത്
- സ്റ്റ്രൈറ്റ് കോട്ടുകൾ കണ്ടെത്തുന്നു –
',"എന്നിവയെ 'സ്മാർട്ട്' ടൈപ്പോഗ്രാഫിക് പതിപ്പുകളാക്കി മാറ്റുന്നു. - ആംപേഴ്സന്റുകളെ ക്ലീൻ ചെയ്യുന്നു –
&എന്നത് നിലവിൽ ഒരു സാധുവായ HTML എൻ്റിറ്റി അല്ലെങ്കിൽ അതിനെ&ആക്കി മാറ്റുന്നു. - മുഴുവൻ ഉള്ളടക്കത്തിനും ബാധകമാണ് – ഷോർട്ട്കോഡുകൾ വഴി നിർമ്മിക്കപ്പെടുന്ന
<script>ടാഗുകൾക്കുള്ളിലുള്ള കാര്യങ്ങൾ ഉൾപ്പെടെ.
ഫിൽട്ടർ && കാണുമ്പോൾ, അത് നിലവിലുള്ള ഒരു HTML എൻ്റിറ്റിയുടെ ഭാഗമല്ലാത്ത രണ്ട് ആംപേഴ്സന്റുകളായി കാണുന്നു, അതിനാൽ അത് ഓരോന്നിനെയും പ്രത്യേകം എസ്കേപ്പ് (escape) ചെയ്യുന്നു, ഫലമായി && എന്ന് ലഭിക്കുന്നു.
ഈ തകരാർ എങ്ങനെ തടയാം
1. കോഡ് അടങ്ങിയ പേജുകളിൽ ഫിൽട്ടർ ഓഫ് ചെയ്യുക
add_action( 'template_redirect', function () {
if ( is_page() ) {
remove_filter( 'the_content', 'wptexturize' );
remove_filter( 'widget_text_content', 'wptexturize' );
}
} );
ഈ സ്നിപ്പറ്റ് പേജ് ടെംപ്ലേറ്റുകളിൽ മാത്രം wptexturize ഡിസേബിൾ ചെയ്യുന്നു, ഇത് പോസ്റ്റുകൾക്കും മറ്റ് ഉള്ളടക്കങ്ങൾക്കും ടൈപ്പോഗ്രാഫിക് മെച്ചങ്ങൾ നിലനിർത്തുന്നു. കൂടാതെ, ഇൻലൈൻ സ്ക്രിപ്റ്റുകളുടെ മറ്റൊരു ഉറവിടമാകാൻ സാധ്യതയുള്ള വിഡ്ജറ്റ് ടെക്സ്റ്റിൽ നിന്നും ഇത് ഫിൽട്ടർ നീക്കം ചെയ്യുന്നു.
2. && ഒഴിവാക്കാൻ ലോജിക് മാറ്റിയെഴുതുക
ഫിൽട്ടർ നീക്കം ചെയ്യുന്നത് ആഗ്രഹ്യമല്ലെങ്കിൽ, ലോജിക്കൽ AND ഓപ്പറേറ്റർ ആവശ്യമില്ലാത്ത രീതിയിൽ JavaScript റീഫാക്ടർ ചെയ്യുക:
// Original
if (a && b) { … }
// Refactored
var ok = a;
if (ok) { ok = b; }
if (ok) { … }
ഇത് കുറച്ച് അധികം വരികൾ കൂട്ടുമെങ്കിലും, ഫിൽട്ടർ പ്രവർത്തിപ്പിക്കാൻ കാരണമാകുന്ന ആംപേഴ്സന്റിനെ ഇത് ഒഴിവാക്കുന്നു. ലളിതമായ കണ്ടീഷനുകൾക്ക് ഈ രീതി ഫലപ്രദമാണ്, എന്നാൽ സങ്കീർണ്ണമായ എക്സ്പ്രഷനുകളിൽ ഇത് പ്രായോഗികമല്ലാതാകാം.
3. എല്ലാ സ്ക്രിപ്റ്റുകളും എക്സ്റ്റേണലൈസ് ചെയ്യുക
കോഡ് ഇൻലൈനായി ഉൾപ്പെടുത്തുന്നതിന് പകരം JavaScript ഫയലുകൾ എൻക്യൂ (enqueue) ചെയ്യുക എന്നതാണ് ഏറ്റവും മികച്ച പരിഹാരം:
wp_enqueue_script( 'my-calculator', get_template_directory_uri() . '/js/calculator.js', [], null, true );
എൻക്യൂ ചെയ്ത സ്ക്രിപ്റ്റുകൾ the_content ഫിൽട്ടറുകളെ പൂർണ്ണമായും മറികടക്കുന്നു. അവയ്ക്ക് ബ്രൗസർ കാഷിംഗിന്റെ (browser caching) ഗുണവും ലഭിക്കുന്നു, കൂടാതെ അവ മിനിഫൈ ചെയ്യാനോ മറ്റ് അസറ്റുകൾക്കൊപ്പം ബണ്ടിൽ ചെയ്യാനോ സാധിക്കും.
ഈ പ്രശ്നം എങ്ങനെ തിരിച്ചറിയാം
വ്യക്തമായ എററുകൾ ഇല്ലാതെ ഒരു സ്ക്രിപ്റ്റ് പ്രവർത്തിക്കുന്നത് നിൽക്കുകയാണെങ്കിൽ, പേജ് സോഴ്സ് (DOM ഇൻസ്പെക്ടർ അല്ല) പരിശോധിക്കുകയും & എന്ന് സെർച്ച് ചെയ്യുകയും ചെയ്യുക. ഒരു <script> ബ്ലോക്കിനുള്ളിൽ ഇത് കണ്ടാൽ, ഫിൽട്ടറാണ് ഇതിന് കാരണം. ബ്രൗസറിന് പാഴ്സ് ചെയ്യാൻ സിന്റാക്സൽ ആയി ശരിയായ ഒരു സ്ക്രിപ്റ്റ് ലഭിക്കാത്തതിനാൽ ഈ പ്രശ്നം കൺസോളിൽ കാണില്ല.
മറ്റൊരു വശം: എന്തുകൊണ്ട് wptexturize നിലനിർത്തണം?
ഫ്രണ്ട് എൻഡിൽ വായനാസുഖം വർദ്ധിപ്പിക്കാൻ wptexturize സഹായിക്കുന്നു. കർളി കോട്ടുകളും ശരിയായ ഡാഷ് ക്യാരക്ടറുകളും എഴുത്തുകൾക്ക് കൂടുതൽ ഭംഗി നൽകുന്നു, പല സൈറ്റ് ഉടമകളും ഇതിനെ ഒഴിവാക്കാൻ പാടില്ലാത്ത ഒരു സൗന്ദര്യശാസ്ത്രപരമായ സവിശേഷതയായി കണക്കാക്കുന്നു. ഫിൽട്ടർ ആഗോളതലത്തിൽ (globally) നീക്കം ചെയ്യുന്നത് ടെക്സ്റ്റിനെ അതിന്റെ പരുക്കൻ രൂപത്തിലേക്ക് മാറ്റും.
ഇതിനുള്ള വിട്ടുവീഴ്ച എന്നത് തിരഞ്ഞെടുത്ത് നിർത്തലാക്കുക എന്നതാണ്: കോഡ് ഉള്ള ഭാഗങ്ങളിൽ മാത്രം ഫിൽട്ടർ ഓഫ് ചെയ്യുക, അല്ലെങ്കിൽ അതിന്റെ ഔട്ട്പുട്ട് texturizing-ൽ നിന്ന് സുരക്ഷിതമാണെന്ന് വ്യക്തമായി അടയാളപ്പെടുത്തുന്ന ഒരു കസ്റ്റം ഷോർട്ട്കോഡ് ഉപയോഗിക്കുക. WordPress ഇതിനകം തന്നെ wp_kses_post-ഉം മറ്റ് sanitisation helpers-ഉം നൽകുന്നുണ്ട്; മികച്ച ഫലം ലഭിക്കുന്നതിനായി ഡെവലപ്പർമാർക്ക് ഇവ remove_filter കോളുകളുമായി സംയോജിപ്പിക്കാവുന്നതാണ്.
അടുത്തതായി ശ്രദ്ധിക്കേണ്ട കാര്യങ്ങൾ
<script> ടാഗുകളെ സ്വയമേവ ഒഴിവാക്കുന്ന രീതിയിലുള്ള wptexturize-ൽ മാറ്റങ്ങൾ വരുത്തുന്നതായി WordPress core പ്രഖ്യാപിച്ചിട്ടില്ല. അത്തരമൊരു മാറ്റം വരുന്നതുവരെ, ഡെവലപ്പർമാർ അവരുടെ ഇൻലൈൻ കോഡുകൾ മാനുവലായി സംരക്ഷിക്കേണ്ടതുണ്ട്. ഫിൽട്ടറിനെ context-aware ആക്കുന്നതിനുള്ള ഏതെങ്കിലും നിർദ്ദേശങ്ങൾക്കായി core development tracker ശ്രദ്ധിക്കുക. ഇതിനിടയിൽ, JavaScript ഇൻജക്ട് ചെയ്യുന്ന ഏതെങ്കിലും ഷോർട്ട്കോഡോ പേജ് ബിൽഡർ എലമെന്റോ പരിശോധിക്കുകയും മുകളിൽ പറഞ്ഞ മൂന്ന് പരിഹാരങ്ങളിൽ ഒന്ന് നടപ്പിലാക്കുകയും ചെയ്യുക.
ചുരുക്കത്തിൽ: നിങ്ങളുടെ WordPress സൈറ്റിൽ ഇൻലൈൻ JavaScript പ്രവർത്തിക്കുന്നുണ്ടെങ്കിൽ, wptexturize അത് രഹസ്യമായി മാറ്റം വരുത്തുന്നില്ലെന്ന് ഉറപ്പുവരുത്തുക. ഒരു escaped ampersand മാത്രം മതിയാകും ഒരു ഫീച്ചർ തന്നെ പ്രവർത്തനരഹിതമാക്കാൻ; ഇതിനുള്ള പരിഹാരം സാധാരണയായി ഏതാനും വരി PHP കോഡുകളോ അല്ലെങ്കിൽ എക്സ്റ്റേണൽ സ്ക്രിപ്റ്റുകളിലേക്കുള്ള മാറ്റമോ ആണ്.