14 Kwi 2019

Pobranie do wordpressa js i css z hash

W poście poniżej opisałem jak usunąć „?ver” ze statycznych linków – tutaj
Po tej zmianie pojawił się problem z „cashowaniem” plików. Rozwiązanie jest dość proste.

W związku z tym że do generowania plików użyty został „gulp” oraz biblioteka „gulp-rev” za pomącą której do nazw plików dodany jest hash – style-ecf06381de.css

Problem jaki napotykamy to jak wczytać pliki css i js w wordpressie, które za każdym razem gdy zmieniamy coś we frontendzie mają inną nazwę.
Na potrzeby tego bloga stworzyłem poniższą funkcję.

/**
 * match file name
 */

function kodywig_matchFile($partOfName, $folder)
{
  $handler = get_template_directory() . '/assets/' . $folder;
    $openHandler = opendir($handler);
    while ($file = readdir($openHandler)) {
      if ($file !== '.' && $file !== '..') {
        if (preg_match("/^" . $partOfName . "\w+.(" . $folder . ")/i", $file, $name)) {
      return $name[0];
    }
      }
    }
    closedir($openHandler);
}

Do powyższej funkcji przekazywane są dwa parametry, pierwszy $partOfName czyli cześć nazwy. Drugi parametr $folder czyli gdzie znajduje się nasz plik css|js

Najpierw budujemy ścieżkę do folderu, później w pętli wyciągamy nazwę pliku przez preg_match i zwracamy nazwę z dopasowania.

Na przykładzie tego pliku style-ecf06381de.css chcemy go dodać do weodpressa.
W miejscu w którym dodajemy js czy css do strony modyfikujemy wpis na poniższy.

wp_enqueue_style('kodywig-main', get_template_directory_uri() . '/assets/css/' . kodywig_matchFile('style-', 'css'), null, KODYWIG_THEME_VERSION);

W ten sam sposób dodałem krytyczne css w moim wypadku „bootstrap” do head strony jako inline.

/**
 * adding boostrap style inline
 */

function kodywig_inline_css()
{
  $cssFile = kodywig_matchFile("bootstrap-", "css");
  $critical_css = file_get_contents(get_template_directory_uri() . '/assets/css/' . $cssFile);
  echo '<style>' . $critical_css . '</style>';
}
add_action('wp_head', 'kodywig_inline_css', 0);
14 Kwi 2019

Usunięcie „query stirngs” ze statycznych linków – wordpress

Następny kod do przyspieszenia wordpressa.
Kod umieszczamy w pliku z funkcjami np. w functions.php

Polecam sprawdzić stronę przed oraz po modyfikacji na GTmetrix oraz Google pagespeed

function kodywig_remove_css_js_ver($src)
{
  if (strpos($src, '?ver='))
    $src = remove_query_arg('ver', $src);
  return $src;
}
add_filter('style_loader_src', 'kodywig_remove_css_js_ver', 10, 2);
add_filter('script_loader_src', 'kodywig_remove_css_js_ver', 10, 2);
14 Kwi 2019

Google AdSense, wiele reklam – optymalizacja kodu

Najpierw zadajmy sobie pytanie. Ile reklam chcemy umieścić na stornie, jeżeli więcej niż jedną to zapewniam warto przeczytać poniższy tekst 😉
Na stornie Google AdSense kod wygenerowany zawsze wygląda podobnie jak ten poniżej.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- SiteName -->
<ins class="adsbygoogle"
 style="display:block;"
 data-ad-client="pub-111111111111111"
 data-ad-slot="2222222222"  
 data-ad-width="250"
 data-ad-height="250"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});  });
</script>

Problem jaki występuje przy większej liczbie reklam to to że wywołujemy kilka razy tę samą stronę, a to ma bardzo duże znaczenie przy optymalizacji strony i szybkości jej działania.
Najprostszym rozwiązaniem jest oczywiście wywołanie tylko raz 🙂

Poniższy kod dodajemy w te miejsca w których chcemy aby się wyświetliły reklamy ale w takiej formie „okrojonej” – oczywiście Twój kod powinien mieć odpowiednie ad-client, ad-slot oraz podane wymiary tkaie jakie chcesz mieć w reklamie”).

<ins class="adsbygoogle"
  style="display:block;"
  data-ad-client="pub-111111111111111"
  data-ad-slot="2222222222"  
  data-ad-width="250"
  data-ad-height="250"></ins>

Teraz najważniejsza część. Na dole stromy przed zamknięciem

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
   [].forEach.call(document.querySelectorAll('.adsbygoogle'), function(){
      (adsbygoogle = window.adsbygoogle || []).push({});  
   });
</script>

Sięgamy tylko raz do google, ale wywołujemy wszystkie reklamy tak jak poprzednio.
Poniższe rozwiązanie jest umieszczone na tej stronie, wystarczy podglądnąć kod 😉

11 Kwi 2019

WordPress i asynchroniczność

Zaczynamy od dodania kodu np. w function.php

function kodywig_async_scripts($url)
{
  if (strpos($url, '#asyncload') === false)
    return $url;
  else if (is_admin())
    return str_replace('#asyncload', '', $url);
  else
    return str_replace('#asyncload', '', $url) . "' async='async";
}
add_filter('clean_url', 'kodywig_async_scripts', 11, 1);

Później w miejscu w którym dodawane są skrypty i css do strony, odpowiednio modyfikuję kod. Do kodu a dokładnie za .js dodaję #asyncload

wp_enqueue_script('kodywig-script-js', get_template_directory_uri() . '/assets/js/script-min.js#asyncload', array(), KODYWIG_THEME_VERSION, true);
26 Sie 2018

Docker + wordpress + phpmyadmin wersja Windows

Nie opiszę tutaj wszystkiego związanego z dockerem bo jestem świerzynka w tym temacie oraz jest tego tyle że po prostu nie da się tego opisać bez przepisywania dokumentacji 😉
Będzie to tylko mały wycinek tego co jest mi potrzebne do frontentu z przykładem użycia WordPress, MySQL oraz phpMyAdmin na Windowsie.

Do czego można by użyć Dockera?

Powiedźmy że chcemy stworzyć aplikację składającą się właśnie z WordPress + MySQL + phpMyAdmin aby przygotować nowy theme czy plugin.
Wszystko to musimy zainstalować osobno na komputerze do tego PHP + apache2 lub użyć Xampp’a, ale co jeśli musielibyśmy użyć kilku wersji PHP 5.5 czy 5.6 i do tego MySQL również w kilku wersjach.

Normalnie czekało by nas bardzo długie konfigurowanie każdej instancji, odinstalowanie elementów i instalacja nowych oraz ich konfiguracja czyli jednym słowem koszmar.

W takich przypadkach pomocny jest właśnie Docker. Wystarczy wybrać kontener z wersją aplikacji i już. Można nawet uruchomić wiele kontenerów równolegle, dzięki czemu możemy testować aplikację w kilku rożnych wersjach w tym samym czasie!
Najważniejsze przynajmniej dla mnie jest to że nie zaśmiecamy sobie środowiska zbędnymi instalacjami, a jak wiemy w tym względzie Windows jest dość ułomnym środowiskiem i można go łatwo „zepsuć”.

Teraz trochę definicji.

Docker jest narzędziem , które pozwala umieścić program oraz jego zależności w przenośnym wirtualnym kontenerze. Umożliwia utworzenie kontenerów zawierających pojedyncze aplikacje ale także łączyć je w większe środowiska.

Ok zaczynamy zabawę.

Najpierw należy zainstalować Dockera na komputerze cały proces jest opisany na zerknij tutaj
W dalszej części będziemy korzystać z narzędzia Docker Compose ono jest dla wersji MAC jak i Windows jest zaszyte w instalacji Docker zaś linuxowcy muszą je osobno doinstalować.

1 2 3 5