Бид Page Builder Sandwich-ийг олон нийтэд хүргэснээс хойш 10 сар өнгөрчээ. Бид одоо 6,000 орчим идэвхтэй суулгалттай болоод байгаа бөгөөд энэ нь бидний хувьд том амжилт юм. Үүний үр дүнд бид сайн, муу маш их санал сэтгэгдэл хүлээн авсан. Гэсэн хэдий ч нийтлэг санал дүгнэлт нь хүмүүс зах зээл дээрх бусад хуудас бүтээгчидтэй харьцуулахад бүтэц (layout) угсрах, агуулга үүсгэхэд хэр хялбар байгаад сэтгэл хангалуун байдаг явдал юм.
Бидний хүлээн авсан санал хүсэлтийн дийлэнх нь шинэ функц нэмэх хүсэлт байсан бөгөөд сүүлийн хэдэн сарын хугацаанд тэдгээрээс нэлээдийг нь нэмж оруулсан. Гэвч үүнийг үргэлжлүүлэн хийх явцдаа бид хэрэглэгчийн интерфэйсийг ч мөн аажмаар өөрчилж эхэлсэн юм. Үүний үр дүнд бид хэрэглэгчийн туршлагыг ч мөн… улам дордуулж өөрчилсөн байв. Улмаар интерфэйсийг дахин эргэж харах шаардлагатай тэр цэгт хүрсэн, учир нь энэ нь цаашид жигд, саадгүй ажиллахаа больж, янз бүрийн функцууд ч хоорондоо сайн зохицохгүй байлаа.
Хуучирсан интерфэйс
PBS-ийн өмнөх хувилбаруудад бид бүх зүйлийг товчлуур хэлбэртэй байлгахыг хүссэн. Яагаад? Учир нь товчлуурыг ашиглахад хялбар байдаг. Та зүгээр л… түүн дээр дарна. Инспекторын хуучин хувилбарууд дээр (дээрх зураг дээрх хажуугийн самбар) товчлуур дээр дарахад утга нь нэмэгдэж, shift+дарвал утга нь буурдаг байв. Энэ нь тун амархан сонсогдож байна. Гэвч карусель, таб, газрын зураг болон бусад шинэ элементүүд, функцууд нэмэгдсэнээр тэдгээр бүх товчлуурууд нь өөр өөр загвартай олон дүрс тэмдгүүдийн замбараагүй бөөгнөрөл болж, дажгүй интерфэйс гэхээсээ илүү эртний дүрс үсэг шиг харагдаж эхэлсэн. Энэ нь туршлагатай хэрэглэгчдэд асуудал биш байсан ч хэрэв та PBS-д шинээр хөл тавьж байгаа бол харахад сүрдмээр байсан юм.
Дараа нь инспектор дээр хэд хэдэн асуудал гарч ирэв. Анхны санаа нь бүх зүйлийг энгийн бөгөөд инспекторын дотор нээлттэй байлгах явдал байлаа. Бүх зүйл гэдэгт би текстийг гарчиг болгох, дэвсгэрийн өнгө, фонтын өнгийг өөрчлөх гэх мэт бүхий л зүйлийг хэлж байсан юм. Гэвч одоогийн байдлаар инспектор нь хулганы гүйлгэгч дугуйг ашиглан дээш, доош байнга гүйлгэх шаардлагатай маш олон сонголтыг агуулж байна. Энэ нь миний анх хэрэглэгчдэд зориулж хийхийг хүссэн инспекторын төсөөллөөс тэс өөр болсон байв.
Эцэст нь, бид саяхан таны дуртай залгаасуудад (plugins) зориулсан shortcode mapping буюу шорткод буулгалтыг. Энэхүү функц нь shortcode засварлах туршлагыг илүү тааламжтай болгоход шаардлагатай текст талбарууд, тоон гулсуур, сонголтын нүднүүд (checkboxes) болон нэмэлт шинэ сонголтын төрлүүдийг үүсгэхийг биднээс шаардсан. Анхандаа энэ нь сайн санаа байсан бөгөөд тийм ээ, энэ нь shortcode-той ажиллахад танд илүү хялбар болгосон. Гэвч дахин хэлэхэд энэ функц нь бидний зөвхөн “товчлуурт суурилсан” интерфэйсээс гажсан юм. Эргээд бодоход shortcode-ийн шинж чанаруудыг өөрчлөхөд зөвхөн товчлуур ашиглах нь үнэхээр боломжгүй зүйл байсан. Одоо хамгийн сүүлийн хувилбарт бид 2 төрлийн удирдлагатай үлдсэн: товчлуурууд болон shortcode талбарууд.
Бидний интерфэйс цаашид үр дүнтэй байхаа больсон (эсвэл бидний хэрэгцээнд нийцэхээ больсон) гэж үзэхэд хүргэсэн өөр хэд хэдэн шалтгаан бий, гэхдээ дээрх зүйлс нь гол шалтгаанууд юм. Нэг зүйл үргэлж тодорхой байсан: бид интерфэйсийг шинэчлэх ёстойгоо мэдэж байсан.
Хуудас бүтээгч төгс тохиолдолд хэрхэн ажиллах ёстойг тодорхойлох нь
Шуудхан орж зүйлсийг яаран өөрчлөхийн оронд бид хуудас бүтээгчийн бүхэл бүтэн туршлагыг цогцоор нь харахын тулд зуун алхам ухарсан. Бид интерфэйст шинэ амьдрал бэлэглэхийг хүссэн. Үнэнийг хэлэхэд, жил бүр үүнийг дахин дахин шинээр хийхийг бид хүсээгүй. Энэ нь туйлын ядаргаатай бөгөөд WordPress-ийн нийгэмлэгт дорвитой тус нэмэр болохгүй. Энэ удаад бид бүх зүйлийг тайван бөгөөд няхуур хийхээр шийдсэн. Бид Page Builder Sandwich-ийн өнцөг булан бүрийг, түүнийг юу сайн хуудас бүтээгч болгодог болохыг судалж, эцэст нь бүх засварлах туршлагыг цөөн хэдэн үндсэн ойлголтод багтаан боловсруулсан.
Үндсэн ойлголт #1: Зүйлсийг засахын тулд агуулга дээрээ шууд бичих
Хуудас бүтээгч суулгах гол шалтгаануудын нэг нь WordPress-ийн backend текст засварлагчийн хязгаарлалтаас гарах явдал юм. Backend засварлагч нь муу гэсэн үг биш, гэхдээ вэб хуудсаа үүсгэх явцад энэ нь зочдод хэрхэн харагдахыг шууд харуулдаггүй бөгөөд нэг баганатай бүтцээс гадуур агуулгыг зохион байгуулах боломжийг олгодоггүй. Та тэнд зөвхөн өөрийн бичсэн текст болон зарим зургийг л харж чадах бөгөөд илүү нарийн төвөгтэй зүйлсийг (тухайлбал холбоо барих маягт гэх мэт) харах боломжгүй байдаг. Та shortcode нэмж чадах ч тэдгээр нь бодитоор дүрслэгдсэн хэлбэрээрээ харагдахгүй*.
* Үүнийг шийдвэрлэхийн тулд бусдын хийсэн Shortcake UI зэрэг залгаасууд байдаг боловч энэ нь энд ярих гол сэдэв биш юм.
Энд л frontend хуудас бүтээгчид гарч ирдэг. Тэд засварлах туршлагыг backend-ээс гаргаж, frontend руу авчирдаг бөгөөд та сайтаа зочдод яг яаж харагдах тэр байдлаар нь засварлах боломжтой болно. Pippin-ий хэлснээр: Юу харж байна, түүнийгээ авна (WYSIWYG).
Frontend засварлагч байхын бас нэгэн давуу тал нь текстээ шууд засах боломжийг олгодог. Гарчиг болон догол мөрийг шууд бичих нь вэбсайт бүтээхэд ердийн үг боловсруулах программ (word processor) ашиглах мэт хялбар байдлыг өгдөг. Товчлуур болон табын шошгыг мөн зүгээр л түүн дээр дарж, бичих замаар өөрчлөх боломжтой байх ёстой.
Энэ бол бусад ихэнх хуудас бүтээгчдийн сайн хийж чаддаггүй талбар юм. Тэдгээрийн ихэнх нь бүх зүйлийг засахын тулд текст оруулах талбарт бичихийг шаарддаг. Дахин хэлэхэд жинхэнэ frontend хуудас бүтээгчид ийм байх ёсгүй. Текстийг шууд бичиж, засах нь 2-р хувилбараас хойш Page Builder Sandwich-ийн давуу тал байсаар ирсэн бөгөөд бид 3-р хувилбарт үүнийг хадгалж үлдэхийг баталгаажуулсан.
Үндсэн ойлголт #2: Түргэн тохируулга хийхэд хулганыг ашиглах
Хулгана бол хуудас бүтээгчдэд ихэвчлэн анхааралгүй орхигддог хүчирхэг хэрэгсэл юм. Ихэнхдээ хуудас бүтээгчид үүнийг элементүүдийг чирч өөр өөр байршилд байрлуулах эсвэл товчлуур, оруулах талбар дээр дарахад ашигладаг. Энэ нь зүгээр л хэдий ч хуудас бүтээх тал дээр хулганаар хийж болох маш олон зүйл бий.
Нэгдүгээрт, хуудсыг засварлах хэрэгсэл болгон хулганыг ашиглах нь ялангуяа зай (margins, paddings) болон хэмжээ зэрэг харагдах шинж чанаруудыг тохируулахад гайхалтай харааны хариу үйлдлийг өгдөг. Одоо элементүүдээ тохируулах нь төрөлхийн мэт мэдрэмж төрүүлнэ.
PBS-ийн 3-р хувилбарт та хулганаа ашиглан олон зүйлийг тохируулах боломжтой болно. Та бие даасан элементүүдийн хоорондох зай (margins), багана доторх зай (paddings), мөн зураг, дүрс тэмдэг болон газрын зургийн хэмжээг тохируулах боломжтой. Бид мөн тоон утгыг өөрчлөх боломжийг олгодог товчлууруудыг гулсуураар сольсон.
Үндсэн ойлголт #3: Текстийн хэв маягийг өөрчлөхөд хялбар байх ёстой
Хэрэв та дэлгэцнээсээ нэг алхам ухраад харвал вэб хуудсандаа нэмдэг ихэнх зүйлс тань текстэн агуулга байдаг болохыг анзаарах болно. Мэдээж бидэнд тэдгээрийг дагалдах зураг, дүрс тэмдгүүд байдаг – сүүлийн үед бид сайтууддаа илүү том зургуудыг нэмэх хандлагатай болсон. Гэвч чухал агуулгын дийлэнх нь бүгд текст байдаг: гарчиг, жагсаалт, догол мөр, эшлэл гэх мэт. Үүний зэрэгцээ бид өөрсдийн загварт тохируулан текстээ хэрхэн хэлбэржүүлэх вэ гэдэг асуудал гарч ирдэг. Бид тэдгээрийн хэмжээ, өнгийг өөрчлөх эсвэл тод (bold), налуу (italic) болгодог. Энэ нь бидний агуулгыг уншигчдад илүү уншигдахуйц, ач холбогдолтой, сэтгэл татам болгоход чиглэгддэг.
Бид текстийн хэв маягийг байнга өөрчилдөг тул загварыг өөрчлөх товчлуурууд нь маш хялбар хүрэх боломжтой байх ёстой. Тэдгээр нь бидний эхэлж нээх шаардлагатай гарч ирдэг цонхон (pop up) дотор нуугдсан байх ёсгүй. Ихэнх хуудас бүтээгчид энэ дутагдлаас болж зовдог. Хэрэглэгчийн интерфэйсийг “замбараагүй биш” гэж нэрлүүлэхийн тулд хамгийн их ашиглагддаг сонголтууд хүртэл ил нүднээс нуугдсан байдаг.
Үүнийг шийдэхийн тулд бид хамгийн түгээмэл хэрэглэгддэг үг боловсруулах программуудыг судалж үзсэн. Тэдгээрийн дэлгэцийн дээд хэсэгт текстийг хэлбэржүүлэхэд ашиглагддаг олон товчлуур бүхий мөр байдгийг бид анзаарч, 3-р хувилбарт ижил байрлалыг хуулбарласан юм. Одоо бид дэлгэцийн тань дээд хэсэгт текстийн хэв маягийн бүх товчлуурыг үргэлж бэлэн байлгадаг болсон. Энэ нь хэв маягийг өөрчлөх ажлыг үнэхээр хурдан бөгөөд текст засах ердийн зуршил шиг болгож өгдөг.
Үндсэн ойлголт #4: Ахисан түвшний хэв маягийн сонголтууд нь уян хатан боловч ойлгоход хялбар байх ёстой
Хуудас бүтээгчийн гол зорилго бол хүмүүст гайхалтай загваруудыг хялбархан үүсгэх боломжийг олгох явдал юм. Энэ нь бид сурахад хүндрэлтэй байдлыг бий болгохгүйгээр олон төрлийн тохиргоо, сонголтуудыг өгөх ёстой гэсэн үг юм. Зайг (margins, paddings) тохируулах, текстийн хэв маягийг өөрчлөх боломжтой байх нь гайхалтай боловч тэдгээр нь тодорхой хэмжээнд л тусална. Ажлыг бүрэн дуусгахын тулд дэвсгэр зураг, хээ, хүрээ, бэхэлсэн дэвсгэр гэх мэт илүү нарийн сонголтууд танд хэрэгтэй болно. Эдгээр олон янзын тохиргоог нэг дор овоолох нь бага зэрэг төөрөгдүүлж болзошгүй тул бид тэдгээрийн заримыг нь хялбарчилж, 3-р хувилбарт илүү ээлтэй болгох үүднээс ангилалд хувааж зохион байгуулсан.
Үндсэн ойлголт #5: Shortcode-ийн дэмжлэг
Эцэст нь, манай хуудас бүтээгч нь WordPress дээр суурилдаг гэдгийг мартаж болохгүй. Бид уг платформыг болон түүний онцлог функцуудыг дэмжих ёстой бөгөөд тэдгээрийг хязгаарлах эсвэл тэдгээрээс хазайх ёсгүй. WordPress-ийн санал болгодог нэг том онцлог бол shortcode-ууд юм. Энэ нь нийт агуулга бүхэлдээ shortcode-оос бүрдэх ёстой гэсэн үг биш – тэгвэл замбараагүй болно – харин бид зүгээр л тэдгээртэй нийцтэй ажилладаг байх ёстой. Маш олон залгаасууд болон сэдвүүд shortcode ашигладаг бөгөөд тэдгээрийг бүгдийг нь үл тоомсорловол асар том алдагдал болно. Үнэндээ shortcode нь хуудас үүсгэх үед хэрэглэгчдэд хамгийн дээд зэргийн уян хатан байдлыг олгодог.
Бид хэдэн долоо хоногийн өмнө shortcode mapping системээ танилцуулсан бөгөөд үүний ачаар хэдэн зуун залгаасын хэдэн зуун shortcode-ийг системдээ буулгасан. Бид WordPress-ийн залгаасын санд байгаа хамгийн түгээмэл залгаасуудыг эхэнд тавьсан тул та тэдгээртэй өөрийн сайт дээрээ таарах магадлалтай. Энэ нь 3-р хувилбарт улам бүр сайжирсан бөгөөд бид цаашид ч үүнийг сайжруулсаар байх болно.
Дүгнэлт
Бид дээрх бүх үндсэн шинж чанаруудыг тусган Page Builder Sandwich-ийн 3-р хувилбарыг бүтээсэн. Энэ бол бидний өнөөг хүртэл WordPress-д зориулан бүтээсэн хамгийн шилдэг хуудас бүтээгч юм. Энэ нь ашиглахад илүү ойлгомжтой бөгөөд аяндаа сурагдахуйц, илүү хурдан ажилладаг, ашиглахад илүү хялбар бөгөөд урьд өмнөхөөсөө илүү ээлтэй болсон.
Хэрэв танд хуудас бүтээгчийн зайлшгүй байх шаардлагатай функцийн талаар ямар нэгэн санал бодол байвал доор сэтгэгдлээр бидэнд мэдэгдээрэй.