കസ്റ്റം ഷോർട്ട്കോഡുകൾ ഉപയോഗിച്ച് ഒരു Divi ബ്ലോഗ് പുനർനിർമ്മിക്കുന്നു
ഞാൻ അടുത്തിടെ WordPress, Divi, Cloudways എന്നിവ ഉപയോഗിച്ച് ഒരു ഫിറ്റ്നസ് പ്ലാറ്റ്ഫോമായ Rev6-ന്റെ ബ്ലോഗ് പുനർരൂപകൽപ്പന ചെയ്തു.
ഞാൻ സാധാരണ Divi Blog മോഡ്യൂൾ ഉപയോഗിച്ചില്ല. കസ്റ്റം URL റൂട്ടിംഗിനും മെമ്പർഷിപ്പ് ഫീച്ചറുകൾക്കും ആവശ്യമായ നിയന്ത്രണം അതിൽ ഇല്ലായിരുന്നു. പകരം, ചൈൽഡ് തീമിൽ (child theme) കസ്റ്റം ഷോർട്ട്കോഡുകളുടെ ഒരു സംവിധാനം ഞാൻ നിർമ്മിച്ചു.
ഈ രീതിയിലൂടെ ലോജിക് ഒരു പേജ് ബിൽഡർ ഡാറ്റാബേസിനുള്ളിൽ ഒളിപ്പിച്ചു വെക്കുന്നതിന് പകരം, വേർഷൻ ചെയ്ത PHP-യിൽ സൂക്ഷിക്കാൻ സാധിക്കുന്നു.
ഈ സെറ്റപ്പിൽ താഴെ പറയുന്ന ഷോർട്ട്കോഡുകളാണ് ഉപയോഗിക്കുന്നത്:
- [rev6_blog_sidebar] നാവിഗേഷനും സെർച്ചെയ്ക്കുമായി
- [rev6_sort_dropdown] സോർട്ടിംഗിനായി
- [rev6_post_grid] ലേഔട്ടിനായി
- [rev6_author_bar] ബൈലൈനിനായി
- [rev6_author_bio] ഓതർ സെക്ഷനായി
- [rev6_related_posts] കൂടുതൽ വായനയ്ക്കായി
ഈ നിർമ്മാണത്തിൽ നിന്നുള്ള എന്റെ സാങ്കേതിക പാഠങ്ങൾ താഴെ പറയുന്നവയാണ്:
അലസമായ CSS ഗ്രിഡ് ഹാക്കുകൾ ഒഴിവാക്കുക ഒരു സൈഡ്ബാർ മുഴുവൻ പേജിലും വരാൻ വേണ്ടി ഞാൻ ഒരിക്കൽ "grid-row: 1 / span 999" ഉപയോഗിച്ചിരുന്നു. ഇത് ആയിരക്കണക്കിന് ശൂന്യമായ വരികളും വലിയ വിടവുകളും (whitespace) സൃഷ്ടിച്ചു. പകരം 'named grid areas' ഉപയോഗിക്കുക. അത് കൂടുതൽ വൃത്തിയുള്ളതും സുരക്ഷിതവുമാണ്.
കോഡിന് മുമ്പ് ഡാറ്റ പരിശോധിക്കുക കാണിക്കാത്ത ഒരു "related posts" സെക്ഷൻ ഡിബഗ് (debug) ചെയ്യാൻ ഞാൻ ഒരുപാട് സമയം ചിലവഴിച്ചു. കോഡ് കൃത്യമായിരുന്നു. പ്രശ്നം ഡാറ്റയിലായിരുന്നു. ആ കാറ്റഗറിയിൽ ഒരു പോസ്റ്റ് മാത്രമേ ഉണ്ടായിരുന്നുള്ളൂ. എന്റെ കോഡ് നിലവിലെ പോസ്റ്റിനെ ഒഴിവാക്കിയതിനാൽ ഫലങ്ങൾ പൂജ്യമായി മാറി. നിങ്ങളുടെ ഫംഗ്ഷനുകളിൽ ബഗുകൾ തിരയുന്നതിന് മുമ്പ് എപ്പോഴും ഡാറ്റാബേസ് ഉള്ളടക്കം പരിശോധിക്കുക.
ഫയലുകളും ഡാറ്റാബേസും തമ്മിലുള്ള വ്യത്യാസം മനസ്സിലാക്കുക ഞാൻ സ്റ്റേജിംഗിൽ നിന്ന് ലൈവ് സൈറ്റിലേക്ക് മൈഗ്രേറ്റ് ചെയ്തപ്പോൾ ലേഔട്ട് തെറ്റായി കാണപ്പെട്ടു. ഞാൻ അത് CSS ഉപയോഗിച്ച് ശരിയാക്കാൻ ശ്രമിച്ചു, പക്ഷേ അത് പരാജയപ്പെട്ടു. ഇംപോർട്ടുകൾ ടെംപ്ലേറ്റുകളെയാണ് മാറ്റുന്നത്, ഡാറ്റാബേസ് ഉള്ളടക്കത്തെയല്ല എന്നതാണ് പ്രശ്നം. മോഡ്യൂൾ വീതിയും പോസ്റ്റ് അസൈൻമെന്റുകളും പോലുള്ള കാര്യങ്ങൾ ഡാറ്റാബേസിലാണ് ഇരിക്കുന്നത്. മൈഗ്രേഷന് ശേഷം ലേഔട്ടിൽ മാറ്റം വരുന്നുണ്ടെങ്കിൽ സ്റ്റൈൽഷീറ്റിലല്ല, ഡാറ്റാബേസിലാണ് നോക്കേണ്ടത്.
ഒരിക്കലും ഒരു ഫുൾ ഡാറ്റാബേസ് പ്രൊഡക്ഷനിലേക്ക് പുഷ് ചെയ്യരുത് ഒരു ഫുൾ സിങ്ക് (full sync) ചെയ്യുമ്പോൾ ഓർഡറുകളും രജിസ്ട്രേഷനുകളും പോലുള്ള യഥാർത്ഥ ഉപയോക്താക്കളുടെ ഡാറ്റ ഓവർറൈറ്റ് ചെയ്യപ്പെടും. എല്ലാം കൂടി ഒരുമിച്ച് പുഷ് ചെയ്യുന്നതിന് പകരം ആവശ്യമായവ മാത്രം മാറ്റമാറ്റുക (targeted transfers).
കാഷെ (Cache) ആണ് ആദ്യ ഘട്ടം ഒപ്റ്റിമൈസ് ചെയ്ത സൈറ്റുകളിൽ, ഉപയോഗിക്കപ്പെടുന്നില്ല എന്ന് കരുതുന്ന സ്റ്റൈലുകൾ CSS ഒപ്റ്റിമൈസേഷൻ ടൂളുകൾ പലപ്പോഴും നീക്കം ചെയ്യാറുണ്ട്. നിങ്ങളുടെ സ്റ്റൈലുകൾ പകുതി മാത്രം പ്രയോഗിക്കപ്പെട്ടതുപോലെ തോന്നുന്നുണ്ടെങ്കിൽ, ആദ്യം കാഷെ ക്ലിയർ ചെയ്യുകയും CSS വീണ്ടും ജനറേറ്റ് ചെയ്യുകയും ചെയ്യുക.
പുനർരൂപകൽപ്പന ചെയ്ത സൈറ്റ് ഇപ്പോൾ ലൈവിലാണ്. ഇതിൽ വൃത്തിയുള്ള ഒരു എഡിറ്റോറിയൽ ലേഔട്ടും കസ്റ്റം ഓതർ സിസ്റ്റവും ഉണ്ട്. കോഡ് എഴുതുന്നതായിരുന്നു എളുപ്പമുള്ള ഭാഗം. എന്നാൽ സാഹചര്യം (environment) ആണ് യഥാർത്ഥ പാഠങ്ങൾ നൽകിയത്.
ഉറവിടം: https://dev.to/highcenburg/rebuilding-a-divi-blog-with-custom-shortcodes-a-field-report-141g