Walang mga detalye ng card
1) Bakit Namin Gumawa ng Bagong Website at Hindi Lang "Magpalit ng Tema"
Noong una naming natukoy ang pangangailangan para sa pagbabago, ang gawain ay tila simple: "Baguhin ang nangungunang bloke at gawing mas epektibo ang tawag sa pagkilos." Sa halaga, ito ay maaaring mukhang isang mabilis na pag-aayos, ngunit sa lalong madaling panahon napagtanto namin na ang maliit na gawaing ito ay nagsiwalat ng mas malalaking pangunahing isyu sa istraktura at disenyo ng site. Ang problema ay hindi lamang isang bloke; ito ay ang buong arkitektura ng site na kailangan ng isang overhaul.
Ang aming website ay binuo sa paglipas ng panahon, na may iba't ibang mga pahina na idinagdag gamit ang iba't ibang mga disenyo at mga layout, nang walang anumang pinag-isang tema o template. Ang bawat pahina ay natatangi sa disenyo nito, na maaaring mukhang malikhain ngunit humantong sa isang makabuluhang isyu: hindi pagkakapare-pareho. Kung magpapatuloy kami at gumawa ng bagong disenyo para lamang sa tuktok na bloke habang pinapanatili ang natitirang bahagi ng site sa dati, mangangahulugan ito ng manu-manong pag-update ng bloke na iyon sa mahigit 700 na pahina at post. Ang mas masahol pa, ang manu-manong prosesong ito ay kailangang ulitin sa tuwing gusto naming gumawa ng mga pagbabago sa hinaharap. Isipin ang kawalan ng kakayahang magsuklay sa daan-daang mga pahina, na tinitiyak na ang bawat isa ay may pinakabagong mga update. Mabilis na naging malinaw na ang patuloy na pagtatrabaho sa lumang site ay hindi magiging sustainable.
Higit pa sa logistik ng pag-update sa bawat page, kailangan naming isaalang-alang ang pangkalahatang karanasan ng user. Inaasahan ng mga user ngayon ang tuluy-tuloy at magkakaugnay na karanasan kapag bumisita sila sa isang website. Kung mag-scroll sila pababa sa isang page at makitang hindi pare-pareho ang disenyo – sa bawat bloke ay gumagamit ng iba't ibang istilo – lumilikha ito ng hindi pagkakaugnay at hindi propesyonal na impression. Ang mas masahol pa, kapag ang isang gumagamit ay lumipat mula sa isang pahina patungo sa isa pa at napansin na ang layout at disenyo ay ganap na naiiba, ito ay nagpapatibay ng isang pakiramdam ng kaguluhan.
Ang hindi pagkakapare-pareho ay lumampas sa layout. Marami sa mga larawan sa site ay luma na, hindi maganda ang istilo, o kahit na hindi naaangkop na nabuo ng mga neural network. Ang mga larawang ito ay hindi naaayon sa modernong mga pamantayan sa disenyo, at ang pagpapalit sa mga ito ay isa pang nakakatakot na gawain. Ang paggamit ng masasamang larawan ay hindi maganda ang ipinapakita sa pangkalahatang kalidad ng site, na nag-iiwan sa mga user ng negatibong impresyon sa produkto o serbisyo na aming inaalok.
Walang simpleng paraan upang komprehensibong i-update ang site gamit ang isang tool tulad ng Elementor. Ang bawat page at block ay naglalaman ng sarili nitong mga inline na istilo, ibig sabihin ay hindi maaaring gawin sa buong mundo ang mga pagbabago. Kung gusto naming i-update ang istilo ng site, kailangan naming dumaan sa bawat solong pahina at manu-manong i-update ang bawat bloke, na magiging matagal at hindi mabisa. Sa pag-iisip na ito, naging maliwanag na ang tanging solusyon namin ay ang pagbuo ng bagong website mula sa simula. Ito ay magpapahintulot sa amin na ilipat ang lahat ng nilalaman habang pinapanatili ang parehong mga URL ngunit may bago, pare-pareho, at madaling naa-update na disenyo.
2) Bakit Namin Nagpasya na Hindi Gamitin ang Elementor
Ang Elementor ay isa sa pinakasikat na tagabuo ng pahina para sa WordPress. Sa ibabaw, tila isang mahusay na tool na nagbibigay-daan para sa mabilis at madaling paggawa ng pahina. Gayunpaman, pagkatapos magtrabaho nang husto dito, nakatagpo kami ng ilang limitasyon na nagpasya sa amin na lumayo sa Elementor at sa halip ay pumili ng custom-built na website.
Mga Limitasyon at Hamon ng Elementor:
- Mga Bug at Glitches : Habang nag-aalok ang Elementor ng maraming kapaki-pakinabang na feature, wala itong mga teknikal na isyu. Halimbawa, kapag kinopya namin ang isang pahina at sinubukang i-edit ito, ang bagong pahina ay madalas na mukhang iba sa orihinal, kahit na bago gumawa ng anumang mga pagbabago. Mayroong madalas na mga bug kung paano ipinapakita ang mga elemento, tulad ng hindi gumagana nang tama ang property na "maximum na lapad ng larawan." Ang mga glitches na ito ay nagpahirap sa pagtiyak ng pare-parehong istilo sa mga pahina.
- Napakaraming Malikhaing Kalayaan, Humahantong sa Hindi Pagkakatugma : Isa sa mga pangunahing selling point ng Elementor ay ang kakayahang i-customize ang lahat. Gayunpaman, ang kakayahang umangkop na ito ay maaaring maging isang tabak na may dalawang talim, lalo na kapag maraming editor ang nagtatrabaho sa site. Madali para sa mga hindi propesyonal na hindi sinasadyang gumawa ng mga page na may hindi pare-parehong disenyo. Halimbawa, nakakita kami ng mga pagkakataon ng mga editor na gumagamit ng pink na text sa mga pink na button o nagdaragdag ng lumilipad na orange triangle sa background, na nagreresulta sa isang kalat at nakakalito na disenyo. Kung walang mahigpit na sistema ng disenyo sa lugar, naging imposible na mapanatili ang isang magkakaugnay na pagkakakilanlan ng visual.
- Limitadong Pag-customize para sa Advanced na Functionality : Habang ang Elementor ay mahusay sa pangunahing page building na may text at mga larawan, nagiging mas mahirap kapag kailangan mong magdagdag ng custom na functionality. Madalas naming natagpuan ang aming sarili na limitado sa mga built-in na bloke, na mahirap i-customize para sa mas kumplikadong mga tampok. Habang ang aming mga pangangailangan ay lumago nang higit sa mga pangunahing layout, ang mga limitasyon ng Elementor ay naging lalong maliwanag.
- Bloated Code at Mga Isyu sa Pagganap : Ang paraan ng Elementor sa pagbuo ng mga pahina ay nagpapakilala ng labis na pagpupugad ng mga elemento. Halimbawa, awtomatikong bumubuo ng marami ang Elementorlalagyan sa loob ng ibamga elemento, bawat isa ay may sariling hanay ng mga estilo. Nagreresulta ito sa isang bloated na istraktura na negatibong nakakaapekto sa bilis ng paglo-load, pagganap ng pahina, at sa huli sa SEO ranking ng website. Noong nagpatakbo kami ng mga pagsubok sa bilis, ang mga resulta ay patuloy na mahina, at ang mabigat na code na nabuo ng Elementor ay higit na may kasalanan.
- Walang A/B Testing Capabilities : Sa digital landscape ngayon, ang A/B testing ay mahalaga para sa pag-optimize ng karanasan ng user. Gayunpaman, hindi nag-aalok ang Elementor ng kakayahang magpakita ng iba't ibang bersyon ng site sa iba't ibang user. Nakikita ng lahat ang parehong site, na naglilimita sa aming kakayahang sumubok at mag-fine-tune ng mga elemento ng disenyo tulad ng mga kulay, mga hugis ng button, at koleksyon ng imahe sa background. Kung wala ang functionality na ito, hindi namin ma-optimize ang site batay sa totoong gawi ng user.
- Database Bloat : Marahil ang isa sa pinakamahalagang disbentaha ng Elementor ay kung paano nito pinangangasiwaan ang mga istilo at nilalaman. Nag-iimbak ang Elementor ng mga istilo, nested na istruktura, at iba pang hindi kinakailangang tag na hinaluan ng nilalaman sa database. Ito ay humahantong sa isang bloated database na hindi nalilinis kahit na ang Elementor ay hindi pinagana o na-uninstall. Bilang resulta, ang paglipat sa isang bagong tema o balangkas ay hindi malulutas ang problema – ang mga istilong iyon ay nananatiling naka-embed sa mga pahina, na patuloy na nagdudulot ng mga isyu.
Sa lahat ng mga hamong ito sa isip, naging malinaw na kailangan namin ng mas matatag na solusyon. Nagpasya kaming bumuo ng bago, independiyenteng website nang walang Elementor, na nag-opt para sa isang mas napapanatiling at flexible na diskarte.
3) Paano Gumawa ng Pahina sa Bagong Site
Ang pagbuo ng bagong site mula sa simula ay nagbigay sa amin ng pagkakataong magtatag ng isang malinis, naka-streamline na proseso para sa paglikha ng mga pahina. Sa bagong system, ang paggawa ng page ay diretso:
- Mag-log in sa WordPress admin panel at i-click ang Mga Pahina -> Magdagdag ng Bagong Pahina .
- Makikita mo ang karaniwang editor ng WordPress, kung saan maaari kang magsulat o mag-paste ng text, magdagdag ng mga link, at mag-upload ng mga larawan.
Ang prosesong ito ay simple ngunit nababaluktot. Sa halip na umasa sa kumplikadong block system ng Elementor, ang editor ng nilalaman sa WordPress ay mas malinis, na nagbibigay-daan para sa mabilis na pag-update at madaling pag-customize. Sa ibaba ng editor, may mga setting para sa Advanced Custom Fields (ACF), na naka-configure na upang mapanatili ang pagkakapare-pareho sa buong site.
Binibigyang-daan kami ng ACF na lumikha ng mga nababagong seksyon ng nilalaman, na may mga bloke tulad ng Nilalaman 1...Nilalaman 15 , kung saan madali mong maitakda ang pamagat, teksto, larawan, at mga label ng button para sa bawat seksyon ng pahina. Awtomatikong pinapalitan ng mga bloke na ito ang pagpoposisyon ng mga larawan at teksto, na tinitiyak na ang layout ay nananatiling nakikita nang hindi nangangailangan ng mga manu-manong pagsasaayos.
Para sa mga larawan, nagpatupad kami ng isang color-matching system na awtomatikong naglalapat ng gradient sa mga pangunahing kulay ng site. Tinitiyak nito na ang lahat ng mga imahe ay nakaayon sa pangkalahatang aesthetic. Para sa mga logo o screenshot kung saan kailangang manatiling buo ang mga kulay, mayroong opsyon na "panatilihin ang mga kulay" na nag-o-override sa gradient.
Pinapasimple ng system na ito ang pamamahala ng nilalaman habang pinapanatili ang pagkakapare-pareho ng disenyo sa lahat ng pahina.
4) Paano Gumawa ng Bagong Post
Ang paglikha ng mga post sa bagong site ay sumusunod sa parehong naka-streamline na proseso tulad ng paggawa ng mga pahina, na may ilang pangunahing pagkakaiba:
- Ang mga post ay may mga URL na kinabibilangan ng ../blog/.. , na nagpapakilala sa kanila mula sa mga pahina.
- Sa kanang sidebar, awtomatikong ipinapakita ng isang block ang tatlong pinakabagong artikulo, na tumutulong na panatilihing dynamic at nakakaengganyo ang blog.
Ang template para sa lahat ng mga post ay matatagpuan sa file template-parts/content/content-single.php , na humahawak sa istraktura at layout ng bawat post sa blog. Ang pare-parehong template na ito ay nagbibigay-daan para sa madaling pag-update at tinitiyak na ang lahat ng mga post ay sumusunod sa parehong mga alituntunin sa disenyo.
5) Mga Advanced na Custom na Field (ACF)
Ang ACF ay naging mahalagang bahagi ng pag-unlad ng aming bagong website. Nagbibigay-daan ito sa amin na lumikha ng mga custom na field na madaling mapamahalaan sa pamamagitan ng WordPress admin panel. Ang mga field tulad ng content_1 ay nire-reference sa PHP code, na nagbibigay-daan sa aming dynamic na makuha ang tamang content para sa bawat page at post.
Ang kakayahang umangkop na ito ay mahalaga para sa pagtiyak na maaari naming pamahalaan at i-update ang site nang mahusay habang nagbibigay pa rin ng puwang para sa pag-customize kapag kinakailangan.
6) Pagsusuri ng A/B
Isa sa pinakamahalagang pagpapahusay na ginawa namin sa bagong site ay ang pagpapatupad ng A/B testing. Nagbibigay-daan sa amin ang pagsubok sa A/B na ihambing ang dalawang bersyon ng site upang makita kung alin ang mas mahusay na gumaganap sa mga user. Maaaring kabilang dito ang pagsubok ng iba't ibang kulay, hugis ng button, background, o kahit na mga layout.
Ipinatupad namin ang functionality na ito gamit ang mga parameter ng GET sa URL. Halimbawa, maaaring gumawa ng dalawang magkaparehong kampanya sa advertising, ngunit may magkaibang mga URL:
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
Kapag nag-click ang mga user sa mga link na ito, mase-save ang parameter sa isang cookie. Depende sa halaga ng parameter, magpapakita ang site ng iba't ibang bersyon ng page, gaya ng iba't ibang kulay ng button o mga larawan sa background. Nagbibigay-daan ito sa amin na mangalap ng mahalagang data sa mga kagustuhan at gawi ng user.
Ang lahat ng mga kaganapan ay naka-log in a .csv file, pati na rin sa isang database ng MySQL, na nagbibigay-daan sa amin na suriin ang data at gumawa ng matalinong mga pagpapasya tungkol sa mga pagpapabuti ng site.
7) Ang functions.php File
- Mga Custom na Uri ng Post at Taxonomy
Ang isa sa mga pangunahing gamit ng functions.php file ay upang lumikha ng mga custom na uri ng post at taxonomy, na nagbigay-daan sa amin na ayusin ang nilalaman nang mas epektibo. Sa halip na umasa lamang sa default na istraktura ng WordPress (mga pahina at post), ipinakilala namin ang mga custom na uri para sa partikular na content, gaya ng mga case study, testimonial, o feature ng produkto. Hindi lamang nito pinanatiling maayos ang aming nilalaman ngunit pinahusay din nito ang karanasan ng user sa pamamagitan ng pagpapadali sa pag-navigate at paghahanap ng may-katuturang impormasyon.
Halimbawa, upang lumikha ng custom na uri ng post para sa mga case study, idinagdag namin ang sumusunod na code sa functions.php :
function create_case_study_post_type() {
register_post_type( 'case_studies',
array(
'label' =>array(
'name' => __( 'Case Studies' ),
'singular_name' => __( 'Case Study' )
),'pampubliko' => totoo,
'has_archive' => totoo,
'rewrite' => array('slug' => 'case-studies'),
)
);
}
add_action( 'init', 'create_case_study_post_type' );
Lumikha ito ng bagong uri ng post na tinatawag na "Case Studies" na kumilos nang katulad ng mga regular na post ngunit may sarili nitong archive at taxonomy na istraktura.
- Naglo-load ng Mga Panlabas na Script at Estilo
Ang isa pang kritikal na paggamit ng functions.php ay ang pag-load ng mga panlabas na script at estilo, na tinitiyak na ang aming website ay mayroong lahat ng kinakailangang library at frameworks. Halimbawa, isinama namin ang mga aklatan tulad ng Slick.js para sa mga slider at AOS (Animate on Scroll) para sa makinis na mga animation. Sa pamamagitan ng piling paglo-load ng mga asset na ito kapag kailangan lang ang mga ito (hal., sa mga partikular na page o template), binawasan namin ang hindi kinakailangang bloat at pinahusay ang bilis ng pag-load ng page.
Narito kung paano namin pinangangasiwaan ang paglo-load ng mga estilo at script:
function load_custom_scripts() {
// Load Slick slider para sa mga partikular na template
if( is_page_template('template-slider.php') ) {
wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/css/slick.css' );
wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '', true );
} // Mag-load ng mga animation ng AOS sa buong site
wp_enqueue_style( 'aos-css', get_template_directory_uri() . '/css/aos.css' );
wp_enqueue_script( 'aos-js', get_template_directory_uri() . '/js/aos.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );
Sa pamamagitan ng paggamit ng mga conditional check (hal., is_page_template()), tiniyak namin na ang mga hindi kinakailangang script ay hindi na-load sa buong site, kaya na-optimize ang pagganap.
- Mga Custom na Shortcode
Upang mapabuti ang flexibility para sa mga hindi teknikal na user na namamahala sa nilalaman ng site, nagdagdag kami ng mga custom na shortcode sa pamamagitan ng functions.php . Ang mga shortcode na ito ay nagbigay-daan sa mga user na madaling magpasok ng kumplikadong pag-andar o mga naka-istilong elemento nang hindi kinakailangang pindutin ang code. Halimbawa, gumawa kami ng shortcode para sa pagdaragdag ng mga custom na button saanman sa site:
[BINAWAN]
Pinadali ng shortcode na ito para sa mga editor na magdagdag ng mga button na may custom na text at mga URL, na nagbibigay-daan para sa mabilis na pagsasaayos nang hindi sinisira ang disenyo.
8) Pangangasiwa sa SEO at Bilis ng Site
Ang isang pangunahing pokus sa panahon ng pag-aayos ng website ay ang pagpapabuti ng SEO at pangkalahatang pagganap ng site. Ang orihinal na site, na binuo gamit ang Elementor, ay nagkaroon ng mga isyu sa mabagal na paglo-load at mga suboptimal na kasanayan sa SEO dahil sa bloated na code at hindi na-optimize na mga larawan.
Pagpapabuti ng SEO
Upang matiyak na ang aming bagong site ay SEO-friendly, nagpatupad kami ng ilang pinakamahuhusay na kagawian sa simula pa lang:
-
Semantic HTML : Maingat naming inayos ang HTML ng site gamit ang wastong paggamit ng mga tag ng header (
,, atbp.), na tinitiyak na madaling mai-parse at maunawaan ng mga search engine ang hierarchy ng nilalaman. Ito ay partikular na mahalaga para sa parehong SEO ranking at accessibility. - Meta Tag at Open Graph Data : Ginamit namin ang Yoast SEO plugin para pangasiwaan ang mga meta title, paglalarawan, at Open Graph data para sa social sharing. Sa paggamit ng Yoast, tiniyak namin na ang bawat page at post ay may naka-optimize na metadata, na mahalaga para sa visibility ng search engine at mga click-through rate mula sa mga platform ng social media.
- Markup ng Schema : Gamit ang functions.php file, nagdagdag kami ng custom na markup ng schema para sa structured data, na pinapabuti kung paano ipinapakita ng mga search engine ang aming mga pahina sa mga resulta ng paghahanap. Halimbawa, isinama namin ang schema para sa mga artikulo, case study, at mga produkto, na tumutulong sa mga search engine na mas mahusay na ikategorya ang aming nilalaman.
function add_schema_markup() {
echo '
{
"@context": "http://schema.org",
"@type": "Organisasyon",
"pangalan": "ConveyThis",
"url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/#{1} #",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head' , 'add_schema_markup' );
Pag-optimize ng Bilis ng Site
Ang pagganap ay isang kritikal na kadahilanan hindi lamang para sa karanasan ng gumagamit ngunit para din sa mga ranggo ng SEO. Gumawa kami ng ilang hakbang upang mapahusay ang bilis ng site:
- Pag-optimize ng Imahe : Gumamit kami ng mga modernong format ng larawan tulad ng WebP , na nag-aalok ng mas mahusay na mga rate ng compression kaysa sa mga tradisyonal na format tulad ng PNG at JPEG. Naihatid ang lahat ng larawan sa naaangkop na laki batay sa resolution ng screen ng user, na tinitiyak ang mabilis na mga oras ng pag-load kahit na sa mga mobile device.
- Lazy Loading : Sa pamamagitan ng pagpapatupad ng lazy loading para sa mga larawan, tiniyak namin na ang mga larawan lang na nakikita sa screen ng user ang unang na-load. Maglo-load ang mga karagdagang larawan habang nag-scroll ang user, na binabawasan ang mga oras ng unang pag-load ng page.
- Pag-cache at Minification : Gumamit kami ng WP Rocket para sa pag-cache, minification, at compression ng HTML, CSS, at JavaScript na mga file. Tinulungan kami ng WP Rocket na makamit ang mas mabilis na mga oras ng pag-load sa pamamagitan ng pagbabawas sa kabuuang laki ng file at paghahatid ng mga static na naka-cache na bersyon ng mga pahina sa mga umuulit na bisita.
9) Pag-optimize at Paglilinis ng Database
Ang lumang website ay nakaipon ng malaking halaga ng "junk" na data dahil sa bloat at hindi mahusay na istraktura ng database ng Elementor. Upang matiyak na tumatakbo nang maayos ang bagong site, nagsagawa kami ng masusing paglilinis at pag-optimize ng database.
- Pag-alis ng Old Elementor Data
Tulad ng nabanggit kanina, kahit na pagkatapos na i-deactivate ang Elementor, ang mga istilo nito, at mga setting ay naka-embed pa rin sa database. Gumamit kami ng mga custom na query para tanggalin ang sobrang data na ito at linisin ang database. Bukod pa rito, inalis namin ang anumang hindi nagamit na mga media file, mga rebisyon sa post, at mga nag-expire na transient na naipon sa paglipas ng panahon.
- Pag-index ng Database
Na-optimize din namin ang database sa pamamagitan ng pagdaragdag ng mga index sa mga column na madalas i-query, na tinitiyak na ang mga query sa database ay mas mabilis at mas mahusay. Halimbawa, ang pagdaragdag ng index sa post_date pinabilis ng column ang mga query na may kaugnayan sa mga kamakailang post, na nagpapahusay sa performance ng aming mga blog page.
Konklusyon
Ang desisyon na bumuo ng bagong website mula sa simula ay hinimok ng mga limitasyon at kawalan ng kahusayan ng lumang site. Ang pagpapalit lang ng tema ay hindi isang praktikal na opsyon dahil sa mga hindi pagkakapare-pareho ng disenyo, bloated na istilo, at mga isyu sa performance na dulot ng Elementor. Sa pamamagitan ng paggawa ng bagong site na may custom na pag-develop at Advanced na Custom Fields, nakamit namin ang isang mas mahusay, magkakaugnay, at propesyonal na website na nagpapahusay sa karanasan ng user habang pinapagana ang mga streamline na update at functionality ng pagsubok sa A/B. Ang bagong site na ito ay nagbibigay ng matatag na pundasyon para sa hinaharap na paglago at mga pagpapabuti.
Handa nang Magsimula?
Ang pagsasalin, higit pa sa pag-alam sa mga wika, ay isang masalimuot na proseso.
Sa pamamagitan ng pagsunod sa aming mga tip at paggamit ng ConveyThis , ang iyong mga isinalin na pahina ay makikinig sa iyong madla, na nararamdamang katutubong sa target na wika.
Habang nangangailangan ito ng pagsisikap, ang resulta ay kapakipakinabang. Kung nagsasalin ka ng website, ang ConveyThis ay makakapagtipid sa iyo ng mga oras gamit ang automated machine translation.
Subukan ang ConveyThis nang libre sa loob ng 3 araw!
CONVEYTHIS