WordPress е навистина моќна платформа. Откако веќе ќе ги знаете основите на правење теми, може едноставно да направите прилагодлива тема и истата да ја интегрирате. Од дуга страна пак, чувствителните слики не се нешто што лесно доаѓа со WordPress. Вие може да направите чувствителни слики рачно, со тоа што треба да ја генерирате секоја големина на слика, па потоа во HTML тагот рачно да ги внесете ознаката на сликата, srcset атрибутите и секоја слика. Ова не само што одзема време, туку и знае да биде проблем за админ корисниците кои немаат познавања од HTML.
За среќа постои начин да се направат измени во WordPress со што тој самиот би ја завршил работата за вас. Тогаш тој, преку додаток, ќе ги генерира сите големини на слики од едно прикачување на слика, и ќе ја имплементира ознаката на сликата и srcset атрибутите онаму каде што авторот ќе сака да ја вметне сликата.
Чекор 1: Модифицирајте го functions.php за да генерирате повеќе големини на слика
Секогаш кога ќе прикачите слика, WordPress ја зачувува во нејзината оригинална големина, но и автоматски генерира 3 копии во овие стандардни големини (може да има само измени или на висината, или на ширината во зависнот од пропорциите на сликата):
- Thumbnail / Мала сликичка (150×150)
- Medium / Средна (300×300)
- Large / Голема (1024×1024)
Со оваа навистина моќна карактеристика може да прилагодите и да направите слики во секаква големина, што би значело дека нема потреба да направите неколку копии на сликата со различна големина, туку само да ја прикачите сликата и WordPress да креира копија со различна големина.
Тоа ќе го направите со модифицирање на functions.php датотеката. За да додадете нова големина на слика, треба да додадете повикувања на функцијата add_image_size (додади_слика_големина). Еве пример кој додава четири нови големини на слика:
add_image_size( ‘sml_size’, 300 );
add_image_size( ‘mid_size’, 600 );
add_image_size( ‘lrg_size’, 1200 );
add_image_size( ‘sup_size’, 2400 );
Секој повик до функцијата вклучува име (за WordPress да може да ја идентификува големината) и ширина. Новите големини ќе бидат широки 300, 600, 1200 и 2400 пиксели. Можно е со функцијата add_image_size WordPress да ја постави и висината и да ја исече сликата, но примерот од погоре ќе ги задржи оригиналните пропорции на сликата. (За повеќе околу функцијата add_image_size може да прочитате во WordPress Codex.)
Претходниот пример ги прикажува само четирите нови големини кои се додадени, но вие секако може да додавате повеќе или помалку.Сето тоа ќе зависи од дизајнот на вашата тема. Сега, секој пат која ќе прикачите слика во WordPress, тој ќе ги генерира новите големини. Следниот чекор е да ги вклучиме во HTML.
Чекор 2: Инсталирајте го додатокот RICG Responsive Images
Мора да инсталирате RICG Responsive Images за да може WordPress да ги извади сите големини на слики. Откако додатокот ќе биде инсталиран и активиран, сите големини на слики ќе се вклучат во ознаката на сликата преку srcset атрибутот.
Обично, кога се додава слика на некоја страница во WordPress излезниот HTML изгледа вака:
<img class=”aligncenter wp-image–176 size-full” src=”https://somedomain.co.uk/wp-content/uploads/2015/05/img1.jpg” alt=”App Screenshot”>
Има една слика во src атрибутот.
Откако ќе се инсталира додатокот, HTML ќе изгледа вака:
<img class=”aligncenter wp-image–137 size-full” src=”https://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg” srcset=”http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–169×300.jpg 169w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–576×1024.jpg 576w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–300×534.jpg 300w, http://localhost/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo–600×1067.jpg 600w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg 600w” alt=”onavo” width=”600″ height=”1067″ sizes=”(max-width: 600px) 100vw, 600px”>
Сите големини на слики се вклучени преку srcset атрибутот.
Додатокот исто така вклучува и Picturefill.js, чувствителен полифил кој дава поддршка на елементот на сликата и на новите чувствителни атрибути. Ова, заедно со srcset атрибутите кои сега се вклучени во ознаката на сликата, е она што ја прави сликата чувствителна на уреди.
Сега вашите слики се прилагодливи.
Кога сликите на вашата веб страница се чувствителни прелистувчот ја избира најсоодветната слика за превземање.
Корисниците со уреди со помали екрани ќе ги добијат помалите слики. Вашата веб страница побрзо ќе се вчитува бидејќи и овие слики се превземаат побрзо, и ќе им биде потребна помала широчина на интернет опсег. Корисниците со уреди со поголеми екрани ќе добиваат поголеми слики, и кај нив нема да се познаваат пикслеите или сликите да се прикажуваат со лош квалитет.
Има само еден можен проблем со овој метод: ќе работи само со слики кои се прикачени во WordPress откако бил инсталиран додатокот RICG Responsive Images. Доколку станува збор за сосема нова веб страница ова нема да претставува никаков проблем, но ако работите на веб страница која е веќе поставена со содржина, тогаш новите големини на слики нема да се генерираат врз постоечките слики. За среќа, нема да има потреба да ги додавате одново сите слики бидејќи постои додаток кој може ова да го реши.
Чекор 3: Инсталирајте додаток за повторно генерирање на големината на сликите (опционо)
Додатокот Regenerate Thumbnails ќе ги помине сите постоечки прикачувања на слики и ќе генерира нови големини на слики според оние кои сте ги креирале во functions.php . Овој додаток ќе ви заштеди многу време, а единствено нешто што треба да направите е да кликнете на само едно копче.
Откако ќе го инсталирате додатокот, одете во Tools -> Regen. Thumbnails, а потоа кликнете на копчето -Regenerate All Thumbnails. Ќе ви се појави статусна лента на која ќе може да видите кај колку слики е сменета големината.
Сега, сите веќе поставени слики на вашата веб страница ќе се прикажуваат точно употребувајќи ја ознаката за слика преку srcset атрибутот.
Доколку сакате да го направите првиот чекор во област на веб дизајнот а досега никогаш не сте кодирале, првото нешто што би требало да го направите е да го совладате WordPress-от. Тоа можете да го направите на два начина, во зависност од тоа како го вреднувате вашето време:
1. Споро, со помош на бесплатни курсеви. На интернет можете да најдете безброј бесплатни курсеви, претежно на англиски јазик, но во тој случај ќе бидете оставени сами на себе. Наоѓањето одговор на секој проблем на кој ќе налетате значи чести заглавувања, без гаранција дека ќе го најдете најдоброто решение.
2. Брзо, со помош на искусен ментор. Ако сакате резултати во рекордно краток рок, курсот “Управување со содржини со WordPress“ може да биде вистинското решение за вас. За само еден месец, ако не и побрзо, ќе го совладате WordPress-от и ќе можете веднаш да почнете да заработувате правејќи и одржувајќи веб страници за вашите клиенти.
