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);
25 Mar 2019

Emmet przyspieszamy pisanie HTML

W uproszczeniu, emmet pomaga nam w szybkim pisaniu html
Może występować jako plugin czy może być wbudowany do edytora którego używamy.
Ja używam visual studio code i on jest tam wbudowany w dodatku bardzo ładnie podpowiada składnię.
Poniżej to tylko mała lista przydatnych funkcji resztę można znaleźć tutaj

Zaczniemy od podstaw.
Napisz ! dostaniemy podstawę HTML

< !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body></body>
</html>

Inne podstawowe i często używane to:

<!-- link -->
<link rel="stylesheet" href="" />
<!-- link:css -->
<link rel="stylesheet" href="style.css" />
<!-- link:favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- link:rss -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
<!-- style -->
<style></style>
<!-- script -->
<script></script>
<!-- script:src -->
<script src=""></script>
11 Lut 2019

Breakpoints w Sass

W dzisiejszym świecie css nie obejdzie się bez breakpointów do RWD. Praktycznie wszyscy używają scss a w takim razie możemy użyć mixin.

Najpierw tworzę listę breakpoints jako mapę, którą będziemy wykorzystywać w naszych stylach. Poniżej przykładowa lista, do własnych projektów użyj własnej listy.

$breakpoints: (
  xs: 512px,
  sm: 768px,
  md: 896px,
  lg: 1152px,
  xl: 1280px
);

Następna czynność to użycie mixin i expression. Użyłem w tym przykładzie min-width ale również można użyć max-width. Dokładnie chodzi o @media (min-width: 512px) {} lub @media (max-width: 512px) {} wybór należy już tylko od Ciebie.

@mixin breakpoint( $breakpoint ) {
  @if map-has-key( $breakpoints, $breakpoint ) {
     @media ( min-width: #{ map-get( $breakpoints, $breakpoint ) } ) {
       @content;
     }
  } @else if type_of( $breakpoint ) == number and unit( $breakpoint ) == px or unit( $breakpoint ) == em or unit( $breakpoint ) == rem {
     @media (min-width: $breakpoint ) {
       @content;
     }
   } @else {
     @warn "Nie można pobrać żadnej wartości z `#{$breakpoint}`. Nie jest zdefiniowany w mapie `$breakpoints` lub jest nieprawidłową liczbą px, em, lub rem.";
  }
}