Koje teme, plaginove i custom kod sam koristio da napravim ovaj sajt (i ostale BikeGremlin sajtove). Kao i većinu članaka, ovo pišem prvenstveno kao lični podsetnik – a ako još nekom koristi, super! 🙂
U posebnom članku objasnio sam inicijalna WordPress podešavanja, koja se ne razlikuju mnogo od sajta do sajta, dok drugi članci daju detaljno objašnjenje za sledeće:
- Kako dodati Gugl Programabilnu pretragu na WordPress sajt?
- Kako lako napraviti AMP verziju WordPress sajta?
- Kako sam postavio Gugl AdSense reklame na WordPress?
- Kako sam povezao Gugl Analitiku sa WordPress-om i AMP-om?
- Kako sam sprečio spam komentare?
Sadržaj:
- Uvod
- Custom kod u child temi
- Izbor plaginova
- Izbor i podešavanje teme
4.1. Meniji
4.2. Doterivanje - Pokretanje WordPress-a sa PHP 8.0
- Zaključak
1. Uvod
2015. godine, tražio sam način da svoje beleške, radove i razmišljanja postavim na Internet, kako bi i meni i drugima bili dostupni gde god se nalazili. Od svih dostupnih rešenja, WordPress je izgledao kao najmanje loše – sa svim prednostima i manama. Još uvek mi tako izgleda.
Sredinom 2021, zaključio sam da je krajnje vreme napraviti da mi sajtovi izgledaju pristojno, i da budu lakši za upotrebu, uz unapređenu opciju za pretragu. Tako će bolje služiti i meni i drugima.
U posebnom članku opisao sam proces redizajna sajta – tu se možete lepo i nasmejati slikama iz 2015, 2018, itd. 🙂 Ovde ću objasniti tehnički aspekat – šta i kako sam radio da sajtovi rade i izgledaju kao sada.
Počeću “od nazad” – prvo sa custom kodom. To jeste došlo na kraju, kao šminkanje, i bilo je najlakši deo, ali mislim da će za praćenje teksta biti lakše da se krene sa suštinski jednostavnijim stvarima.
2. Custom kod u child temi
Napravio sam WordPress child temu i u njen style.css dodao sledeće:
– svakako preporučujem da se child tema napravi u startu i sve izmene tu smeštaju
/* BEGIN izmena velicine social ikona */
.wp-block-social-links {
font-size:50px;
}
/* END izmena velicine social ikona */
/* BEGIN google pretraga max-sirina */
#wgs_widget_wrapper_id {
max-width:600px;
min-height:40px;
}
/* END google pretraga max-sirina */
/* BEGIN manja hero slika za mobilne */
@media (max-width: 935px) {
.page-hero {
background-image: url( 'https://bike.bikegremlin.com/wp-content/uploads/2021/09/hero-image-mobile-retina-bikegremlin.jpg' ) !important;
}
}
/* END manja hero slika za mobilne */
/* BEGIN visina hero slike na desktopu */
@media (min-width: 936px) {
.page-hero {
height: 300px !important;
}
}
/* END visina hero slike na desktopu */
/* BEGIN iskljucivanje horizontalnog scrol bara */
body {
overflow-x: hidden;
}
/* END iskljucivanje horizontalnog scrol bara */
/* BEGIN poravnavanje naziva slika na levu marginu */
.wp-block-image figcaption {
text-align: left;
}
/* END poravnavanje naziva slika na levu marginu */
/* BEGIN prikaz samo datuma azuriranja clanka */
.posted-on .updated {
display: inline-block;
}
.posted-on .updated + .entry-date {
display: none;
}
.posted-on .updated:before {
content: "Updated: ";
}
/* END prikaz samo datuma azuriranja clanka */
/* BEGIN text background for gallery images */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
background: linear-gradient(160deg,rgb(0 0 0 / 95%),rgb(0 0 0 / 69%) 70%,transparent);
bottom: 0;
box-sizing: border-box;
color: #fff;
font-size: 16px;
}
/* END text background for gallery images */
Komentari objašnjavaju šta koji deo radi – mislim da nema potrebe dalje detaljisati.
U functions.php child teme, ubacio sam sledeće:
/ BEGIN Disable image format auto creation by WordPress
function add_image_insert_override( $sizes ){
unset( $sizes[ 'thumbnail' ]);
unset( $sizes[ 'medium' ]);
unset( $sizes[ 'medium_large' ] );
unset( $sizes[ 'large' ]);
unset( $sizes[ 'full' ] );
return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'add_image_insert_override' );
// END Disable image format auto creation by WordPress
// BEGIN disable auto 768px image display on mobile
add_filter( 'wp_calculate_image_srcset', '__return_false' );
// END disable auto 768px image display on mobile
// BEGIN Disable WordPress Lazy Load images
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
// END Disable WordPress Lazy Load images
// BEGIN smooth scroll for all anchor links
add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
$elements[] = 'a[href*="#"]:not(.generate-back-to-top)';
return $elements;
} );
// END smooth scroll for all anchor links
// BEGIN disable header Element for AMP
add_filter( 'generate_element_display', function( $display, $element_id ) {
// Tell the non-AMP Element not to appear.
if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() && 13457 === (int) $element_id ) {
$display = false;
}
return $display;
}, 10, 2 );
// END disable header Element for AMP
// BEGIN Google analytics
function ns_google_analytics() { ?>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-GOOGLE-TRACKING-CODE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-GOOGLE-TRACKING-CODE');
</script>
<?php
}
add_action( 'wp_head', 'ns_google_analytics', 10 );
// END Google analytics
// BEGIN Hiding the admin-bar for the non-editors
function remove_admin_bar() {
if (!current_user_can('edit_posts')) {
show_admin_bar(false);
}
}
add_action('after_setup_theme', 'remove_admin_bar');
// END Hiding the admin-bar for the non-editors
// BEGIN ads for amp - goes into footer
$print_amp_auto_ads = function() {
$ad_client = 'ca-pub-GOOGLE-AD-CODE'; // @your client ID
if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
?>
<amp-auto-ads type="adsense" data-ad-client="<?php echo esc_attr( $ad_client ); ?>"></amp-auto-ads>
<?php
}
};
// For Paired/Native mode.
add_action( 'wp_footer', $print_amp_auto_ads );
// END ads for amp - goes into footer
// BEGIN list child pages without listing pages of the same hierarchy level
function relja_list_child_pages() {
global $post;
if ( is_page() )
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
if ( isset($childpages )) {
$string = '<ul>' . $childpages . '</ul>';
}
else{
$string = '';
}
return $string;
}
add_shortcode('relja_child_pages', 'relja_list_child_pages');
// END list child pages without listing pages of the same hierarchy level
// NEW BEGIN Google Auto Ads
function ns_google_autoads() { ?>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-GOOGLE-AD-CODE"
crossorigin="anonymous"></script>
<?php
}
add_action( 'wp_head', 'ns_google_autoads', 10 );
// NEW END Google Auto Ads
// BEGIN Display breadcrumbs
function the_breadcrumb()
{
$lg_home_name ="Home";
$lg_archive_by_category = "";
$lg_search_results_for = "Search:";
$lg_posts_tagged = "Keyword:";
$lg_articles_posted_by = "Author:";
$showOnHome = 0; // 1 - show breadcrumbs on the homepage, 0 - don't show
$delimiter = '»'; // delimiter between crumbs
//$home = 'Home'; // text for the 'Home' link
$home = $lg_home_name; // text for the 'Home' link
$showCurrent = 1; // 1 - show current post/page title in breadcrumbs, 0 - don't show
$before = '<span class="current">'; // tag before the current crumb
$after = '</span>'; // tag after the current crumb
global $post;
$homeLink = get_bloginfo('url');
if (is_home() || is_front_page()) {
if ($showOnHome == 1) {
echo '<div id="crumbs"><a href="' . $homeLink . '">' . $home . '</a></div>';
}
} else {
echo '<div id="crumbs"><a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';
if (is_category()) {
$thisCat = get_category(get_query_var('cat'), false);
if ($thisCat->parent != 0) {
echo get_category_parents($thisCat->parent, true, ' ' . $delimiter . ' ');
}
//echo $before . 'Archive by category "' . single_cat_title('', false) . '"' . $after;
echo $before .$lg_archive_by_category. ' ' . single_cat_title('', false) . '' . $after;
} elseif (is_search()) {
//echo $before . 'Search results for "' . get_search_query() . '"' . $after;
echo $before .$lg_search_results_for.' "' . get_search_query() . '"' . $after;
} elseif (is_day()) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo '<a href="' . get_month_link(get_the_time('Y'), get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
echo $before . get_the_time('d') . $after;
} elseif (is_month()) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo $before . get_the_time('F') . $after;
} elseif (is_year()) {
echo $before . get_the_time('Y') . $after;
} elseif (is_single() && !is_attachment()) {
if (get_post_type() != 'post') {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a>';
if ($showCurrent == 1) {
echo ' ' . $delimiter . ' ' . $before . get_the_title() . $after;
}
} else {
$cat = get_the_category();
$cat = $cat[0];
$cats = get_category_parents($cat, true, ' ' . $delimiter . ' ');
if ($showCurrent == 0) {
$cats = preg_replace("#^(.+)\s$delimiter\s$#", "$1", $cats);
}
echo $cats;
if ($showCurrent == 1) {
echo $before . get_the_title() . $after;
}
}
} elseif (!is_single() && !is_page() && get_post_type() != 'post' && !is_404()) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
} elseif (is_attachment()) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID);
$cat = $cat[0];
echo get_category_parents($cat, true, ' ' . $delimiter . ' ');
echo '<a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a>';
if ($showCurrent == 1) {
echo ' ' . $delimiter . ' ' . $before . get_the_title() . $after;
}
} elseif (is_page() && !$post->post_parent) {
if ($showCurrent == 1) {
echo $before . get_the_title() . $after;
}
} elseif (is_page() && $post->post_parent) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) {
echo $breadcrumbs[$i];
if ($i != count($breadcrumbs)-1) {
echo ' ' . $delimiter . ' ';
}
}
if ($showCurrent == 1) {
echo ' ' . $delimiter . ' ' . $before . get_the_title() . $after;
}
} elseif (is_tag()) {
//echo $before . 'Posts tagged "' . single_tag_title('', false) . '"' . $after;
echo $before . $lg_posts_tagged .' "' . single_tag_title('', false) . '"' . $after;
} elseif (is_author()) {
global $author;
$userdata = get_userdata($author);
//echo $before . 'Articles posted by ' . $userdata->display_name . $after;
echo $before . $lg_articles_posted_by.' ' . $userdata->display_name . $after;
} elseif (is_404()) {
echo $before . 'Error 404' . $after;
}
if (get_query_var('paged')) {
if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) {
echo ' (';
}
echo __('Page') . ' ' . get_query_var('paged');
if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author()) {
echo ')';
}
}
echo '</div>';
}
}
add_action( 'generate_before_main_content', 'tabela_zaglavlje' );
function tabela_zaglavlje(){
if (function_exists('the_breadcrumb')){
the_breadcrumb();
echo "<hr style='margin:10px 0 20px 0;'>";
}
}
// END Display breadcrumbsOpet, komentari unutar koda sve objašnjavaju. O delu za Gugl reklame sam napisao poseban članak (kako dodati Google Adsense na WordPress), ali kod ispod “// NEW BEGIN Google Auto Ads” je neophodan da bi to sve lepo radilo.
Objašnjenje koda pod “disable header Element for AMP“.
3. Izbor plaginova
Birao sam samo plagine koji imaju besplatnu verziju na wordpress.org. Da bi plagin bio tamo izlistan, mora proći relativno ozbiljne provere, što u određenoj meri umanjuje rizik.
– U posebnom članku sam opširnije pisao o tome kako izabrati dobar WordPress plagin.
Davanje podataka o korištenoj temi i plaginima verovatno nije najpametnije sa bezbednosnog aspekta, ali mislim da u ovom slučaju edukativno-informativni aspekat nosi prevagu. Dakle, evo spiska plagina, složenog po abecedi (za plaćene koristim affiliate linkove):
- Advanced Database Cleaner Pro (affiliate link)
Nakon godina korištenja WordPress-a, baza se napunila svakakvim đubretom, ostacima deinstaliranih tema, plaginova i slično. Ovaj plagin je za mene najbolje rešenje za to. Vrlo lak za upotrebu i efektan. AMPAko želite AMP verziju stranica sajta, ovaj plagin mi se najbolje pokazao (šta je to AMP?).
Ažuriranje: Uz vaganje prednosti i mana, i na osnovu preliminarnih rezultata moje AMP studije slučaja, odlučio sam se izbaciti AMP.- Easy WP SMTP
Verovatno najbolji plagin za nameštanje da vaš sajt ispravno šalje mejlove. - List category posts
Da lako napravim stranicu sadržaja sajta. - LiteSpeed Cache
Najbolji plagin za keširanje WordPress sajta. Newsletter
Pravljenje double-opt-in mejling lista – kako treba. Nisam fan mejling lista i ozbiljno razmišljam o tome da batalim ovaj plagin i tu opciju.
Ažuriranje: odlučio sam bataliti Newsletter i pustiti ljude da se oslone na RSS feed i moju stranicu sa Novostima.- Polylang
Besplatno rešenje za multijezičke sajtove. Mada moji “glavni,” biciklistički sajtovi koriste odvojene WordPress instalacije za svaku jezičku verziju, što daje prednost po pitanju brzine, stabilnosti i fleksibilnosti. Napisaću poseban članak o multijezičnim opcijama za WordPress, sa prednostima i manama. reCaptcha by BestWebSoft
U ogromnoj meri smanjuje količinu spam komentara. Poseban članak ću napisati i o ovome, čim stignem.
U AMP plaginu sam morao isključiti (“Supress”) ovaj plagin, jer je brljao sa AMP verzijama stranica na Android telefonima (prijava problema na forumu za podršku reCaptcha plagina).
Ažuriranje: napravio sam forum i primenio bolje rešenje za blokiranje spam komentara. Zato ne koristim više ni naredni plagin sa ove liste:Subscribe To Comments Reloaded
Posetioci postave pitanje, a moji sajtovi im šibnu mejl kada neko odgovori. Cool! 🙂- The SEO Framework (poznat i kao TSF)
Ovo je jednostavno najbolji WordPress SEO plagin. - The SEO Framework – Extension Manager
Dodatak za TSF – o kojem sam opširno pisao u recenziji TSF Pro (plaćene verzije) plagina. - Wordfence Security
Moj izbor za dodatnu zaštitu sajta (sa svim prednostima i manama koje donosi). Pisao sam detaljno o tome kako podesiti WordFence. WP Google Search
Olakšao mi je implementaciju pametne Google pretrage na sajtu, tako da i izgleda lepo. WordPress.org upozorava da ovaj plagin “nije testiran sa poslednje 3 verzije WordPress-a.” Pa, ja sam ga testirao – radi. 🙂 Developeri su aktivni na svom wp.org forumu za podršku. Samo ne izdaju nikakve “apdejte” jer je plagin jednostavan i radi.
Ažrurianje: batalio sam ovaj plagin jer je bagovao na nekim uređajima, i sa nekim optimizacijama (poput Cloudflare Rocket Loader-a). Umesto njega, konfigurisao sam pretragu na posebnoj stranici sajta.
Za neke plagine sam u spisku iznad postavio linkove ka člancima koji objašnjavaju instalaciju i podešavanje. Verovatno ću napisati slične članke i za ostale plaginove, samo je pitanje vremena.
Bolje je imati manje plaginova. Prvi kandidati za izbacivanje su mi Newsletter i Subscribe To Comments Reloaded plaginovi. Izgledaju kao praktična, dobra ideja, ali mislim da ih ne koristi mnogo posetilaca sajtova.
Mrzim dosadne newsletter-e, ali BikeGremlin newsletter-i se šalju samo jednom godišnje, ili ređe – samo kad želim preneti neke zaista važne informacije.
Takođe, WP Google Search bi se sigurno dao zameniti sa malo custom koda. Polylang još uvek deluje kao najmanje zlo od svih raspoloživih opcija, barem za moju namenu.
4. Izbor i podešavanje teme
Što se mene tiče, GeneratePress je najbolja WordPress tema. 🙂 Za ovaj poslednji redizajn sajtova, odlučio sam se konačno odrešiti kesu za GeneratePress Premium (affiliate link).
Omogućava mi da lako izmenim izgled i osnovne funkcije sajta, a da on ne radi previše sporo, što je slučaj sa većinom page builder-a.
Prvo sam želeo rešiti zaglavlje (header). Tako da naslovna strana ima sliku, a ostale strane da budu bez nje.
Slika 1
Na ovaj način sam u zaglavlju lako dodao i shortcode WP Google Search plagina za polje Google pretrage. Prvobitna izvedba je bila dodavanjem koda za pretragu, ali ovaj plagin je izgled polja i dugmeta za pretragu formatirao lepše nego što je to meni polazilo za rukom. 🙂
CSS kod koji ograničava širinu polja za pretragu kako bi lepše izgledalo (već prikazan u 2. poglavlju):
/* BEGIN google pretraga max-sirina */
#___gcse_0 {
max-width:600px;
}
/* END google pretraga max-sirina */U posebnom članku detaljno sam objasnio kako dodati Gugl programabilnu pretragu na svoj sajt.
Za dalje sam koristio GeneratePress Hooks vizuelni vodič – i rešavao stvari pomoću hook-ova. Ovako dobra dokumentacija zaista olakšava posao.
Na taj način namestio sam da se u zaglavlju svih stranica, osim naslovne, prikazuju Google AdSense reklame, sa poljem za pretragu sajta ispod njih. Ovako je to lako sa GP Premium temom:
Slika 2
Slično sam uradio za prikaz sadržaja koji Gugl preporučuje (sa mojih sajtova) u dnu svake stranice (osim naslovne). Za to sam koristio hook “generate_after_main_content”
Većinu ostalih izmena mogao sam uraditi preko WYSIWYG editora (čita se “viz ii vig”, uživo pikazivanje stvari kako će izgledati u produkcionoj verziji):
Slika 3
Mogu birati opcije, ili kliknuti na plavu ikonicu olovke da menjam deo koji želim. Veoma brzo i lako.
Ova, kao i većina plaćenih tema, ima sto opcija, ali su one kod GeneratPress-a veoma lepo, struktuirano složene.
Moj izbor naslovnih slika za većinu članaka je bio takav da su opisne, a ne lepe. Tako da letimičnim pregledom liste članaka mogu znati koji članak se čime bavi – bez čitanja naslova. Kako bi liste članaka ostale pregledne, podesio sam da se prikazuju u dve kolone, sa ograničenjem visine prikaza naslovnih slika na 200 piksela:
Slika 4
Tokom narednih godina planiram zameniti naslovne slike članaka nekim lepšim, koje su i dalje opisne (ne mogu to uraditi sve sada, imam na stotine članaka). Takođe planiram napisati kratak opis za svaki članak, koji će se prikazivati kada se gleda spisak članaka.
Čekirao sam opciju za “smooth scroll” za linkove koji vode na drugo mesto na stranici (poglavlja, sadržaj i sl.) – kako ekran ne bi samo instant skočio kada se klikne na “- Sadržaj -” i slično, jer to deluje nekad zbunjujuće (gde sam sad dospeo?!). Ovakvi linkovi se zovu “anchor” linkovi i počinju znakom ” # “.
Slika 5
Ovo je bila Mašina ideja – ja sam je samo sproveo u delo. U poglavlju 2 je prikazan sav custom kod, a ovaj deo tog koda je zadužen za “podešavanje” svakog linka na postojećim stranicama da radi smooth scroll (ako vodi ka drugom delu iste stranice):
// BEGIN smooth scroll for all anchor links
add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
$elements[] = 'a[href*="#"]:not(.generate-back-to-top)';
return $elements;
} );
// END smooth scroll for all anchor linksKada sam svaku sitnicu podesio kako je Maša dizajnirala, 🙂 eksportovao sam podešavanja. Onda sam ih mogao importovati na ostale sajtove, štedeći dosta vremena.
Većina plaćenih tema nudi opcije za eksport i import.
4.1. Meniji
Napravio sam dva menija:
- Meni u samom vrhu – prikazuje se samo na desktop verziji sajta, sa par važnih linkova i ikonicom kuće za početnu stranicu.
- Glavni meni (plavi, sa belim tekstom) – prikazuje se na svakoj platformi. Podešen je tako da nestane sa ekrana (i ostavi više prostora za čitanje teksta) kada se skroluje na dole. A da se vrati kada se skroluje ka gore, kako bi sve opcije bile odmah, lako dostupne. Sadrži sve bitne linkove.
Dodavanje slike kućice u meni sam izveo na sledeći način:
Slika 6
- U polje “URL” uneo sam putanju na koju želim da link vodi – u ovom slučaju hiperlink “https://io.bikegremlin.com/”.
- U polje “Link Text” uneo sam HTML kod za prikaz slike, koji vodi ka slici koju sam već bio uploadovao na server (sajt).
Kod iz ovog primera, sa boldovanom putanjom do slike radi jasnijeg prikaza:
<img src="https://io.bikegremlin.com/wp-content/uploads/2021/09/home-icon-25x19-1.png" alt="Home" />Elegantniji način da se ovo uradi je korištenje Font Awesome fonta za prikaz ikonice kućice. Moje rešenje je robusnije, jer će raditi čak i ako je računar prastar, ili iz bilo kog razloga ne prikazuje taj font.
U Header opciji teme (Customizing ▸ Layout ▸ Header) sam morao isključiti “Sticky” opciju za meni na mobilnim telefonima. Moji ogromni meniji sa puno opcija nisu lepo radili sa tom opcijom omogućenom.
4.2. Doterivanje
Kako sam napravio da sekcije “Istaknuto” i “Partneri” na naslovnoj strani budu sa sivom pozadinom?
Slika 7
Dodao sam Gutenberg block “Columns” podešen da bude samo jedna kolona, punom širinom – izborom prve ponuđene opcije: “100”.
U opcijama za taj blok, podesio sam boju pozadine na vrednost ” #f5f5f5 “.
Slika 8
Nakon toga dodavao sam druge blokove unutar tog “Columns” bloka, kao da je on stranica. Za dobijanje izgleda prikazanog na slici iznad, dodao sam još jednu “Columns” sekciju, podešenu da ima dve kolone sa “50/50” odnosom, i u svaku od kolona ubacio sekcije (još blokova) koje sam želeo.
Prvi “Columns” block sa podešenom sivom pozadinom je davao celoj toj konstrukciji ujednačenu, zajedničku sivu pozadinu, bez probijanja bele pozadine između sekcija.
5. Pokretanje WordPress-a sa PHP 8.0
WordPress za rad koristi programski jezik PHP.
Slika 9
Moji sajtovi su do sada radili na pretposlednjoj verziji PHP-a, 7.4. Nisam ljubitelj čestih “apdejtova,” ali sam razmišljao – kad se već mučim oko redizajna, da odmah napravim tako da sve radi na najnovijoj verziji PHP 8.0 i da sam onda sa tim završio… barem za neko vreme:
Slika 10
Prvi korak je bilo detaljno testiranje redizajniranih sajtova sa PHP 7.4. Uvek je važno raditi samo po jednu promenu, jer se inače teško nađe uzrok problema ako se jave.
Nakon testiranja sa PHP 7.4, proverio sam da li su svi plagini i tema kompatibilni sa PHP verzijom 8.0 i kada sam to potvrdio, krenuo sam sa testiranjem u staging okruženju. Sve je prošlo glatko, osim jedne prijavljene greške vezane za moj 5 godina star custom kod, koji je PHP 7.4 prećutno izvršavao, a PHP 8 ga je isto izvršavao, ali upozoravao na problem.
Napisao sam čitav članak o “čudnoj WordPress grešci sa PHP 8.0.” 🙂
Nakon ispravke koda i testiranja svega, moji sajtovi su bili spremni za prelazak na PHP 8.0! U posebnom članku objasnio sam kako se bira i podešava verzija PHP-a na hosting serveru.
Prvi testovi pokazuju da sajtovi rade odlično, čak i za nijansu brže:
Slika 11
6. Zaključak
Iskusni developeri bi sigurno ovo sve uradili preko “ručno pravljene” (eng. custom) teme – mada taj izbor zavisi i od budžeta, tj. koliko su plaćeni za posao. Plašim se da bi u ovom slučaju moj custom kod bio verovatno lošije optimizovan od koda koji pravi dobra premium WordPress tema.
Sajtovi rade lepo – stabilni su i relativno brzi. Drugim rečima: ja sam zadovoljan, a čekam povratne informacije od posetilaca. 🙂
Sve sugestije za ispravke i unapređenja su dobrodošle – koristite sekciju za komentare ispod.
Koga zanima: spisak svih troškova vezano za WordPress sajt.