Kategoria: Code snippets

Opublikowane w

Cookies popup

JS:

/* ################################################################################
################################################################################
################################################################################

Ciasteczka

################################################################################
################################################################################
################################################################################*/


console.log('Skrypt ciasteczkowe jest');
/* Funckje pomocnicze */
function sajanSetCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function sajanGetCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
//console.log(sajanGetCookie('ciasteczkoweCiasteczko'));
if (sajanGetCookie('ciasteczkoweCiasteczko')=='true'){
    //console.log('jest ciasteczko');
    //console.log('ciasteczko: '+sajanGetCookie('ciasteczkoweCiasteczko'));
} else {
    //console.log('nie ma ciasteczka');
    wyswietlPopup();
    
}
function wyswietlPopup(){
    jQuery('body').append('<div id="ciasteczka-popup"><img alt="ikonka ciasteczka" src="https://gooddrut.pl/wp-content/uploads/cookies-badge-gooddrut.png" ><h2>Drogi żytkowniku!</h2><p>Na niniejsze stronie dla Twojej wygody używamy ciasteczek (plików Cookies).<br>Są potrzebne by zapamięcać różne Twoje wybory i ustaienia i ułatwić Ci poruszanie się po witrynie.<br>Jeśli nie zgadzasz się na to, lub nie lubisz ciasteczek, opuść tę stronę, ale pewnie będziesz żałować.</p><div id="guzik-ciasteczka-popup" class="guzik">Ok</div></div>');
    jQuery('#guzik-ciasteczka-popup').click(function(){
                //console.log('kliknieto guzior w popupie trhreth');
                jQuery('#ciasteczka-popup').remove();
                sajanSetCookie('ciasteczkoweCiasteczko','true',999999);
    });
}

CSS:

/* Ciasteeczka */

#ciasteczka-popup {
    background: rgb(0 0 0 / 95%);
    position: fixed;
    bottom: 0;
    z-index: 999999;
    width: 100%;
    border: dashed 3px #9b9b9b;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
}
#ciasteczka-popup img {
    width: 134px;
    margin: 35px;
}
#ciasteczka-popup h2 {
    margin: 0;
    margin-bottom: 15px;
}
#ciasteczka-popup p{
    text-align: center;
}
#ciasteczka-popup .guzik{
    margin-bottom: 20px;
    cursor: pointer;
}
Opublikowane w

Custome elements in WordPress menu

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item');
function your_custom_menu_item ( $items) {
$items = '<li><a href="https://www.facebook.com/postepstudio" target="_blank" class="ikonka-sobial-menu-main-a"><img alt="FB" class="ikonka-sobial-menu-main-img" src="http://postepstudio.pl/wp-content/uploads/ikonki_main_facebook_120x120_postepstudio.png"></a></li>
<li><a href="https://www.instagram.com/postepstudio/" target="_blank" class="ikonka-sobial-menu-main-a"><img alt="IG" class="ikonka-sobial-menu-main-img" src="http://postepstudio.pl/wp-content/uploads/ikonki_main_ig_120x120_postepstudio.png"></a></li>
<li><a href="https://www.youtube.com/channel/UChk4T-PQT_kQwE0AgH4Vp3w" target="_blank" class="ikonka-sobial-menu-main-a"><img alt="YT" class="ikonka-sobial-menu-main-img" src="http://postepstudio.pl/wp-content/uploads/ikonki_main_yt_120x120_postepstudio.png"></a></li>
<!--<li><a href="" target="_blank" class="ikonka-sobial-menu-main-a"><img alt="TikTok" class="ikonka-sobial-menu-main-img" src="http://postepstudio.pl/wp-content/uploads/ikonki_main_tiktok_120x120_postepstudio.png"></a></li>-->
<li id="social-media-menu-separator"></li>
'.$items;
    return $items;
}
Opublikowane w

Kolorowanie składni kodu na stronie/ blogu w Worpressie

https://highlightjs.org/

  • W functions.php podczepiamy bibliotekę highlight.js oraz styl do niej z powyższego linku (template stylu w naswie css’a):
/* biblioteka js */
add_action( 'wp_enqueue_scripts', 'odpalSkryptKolorowaniaKodu' );
function odpalSkryptKolorowaniaKodu(){
    wp_enqueue_script('odpalSkryptKolorowaniaKodu',  '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js?'.rand(0,999999999999999999), array('jquery'), null, true);
}

/* styl css*/
add_action( 'wp_enqueue_scripts', 'odpalStylHighlitera' );
function odpalStylHighlitera(){
    wp_enqueue_style('odpalStylHighlitera','//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css');
}
  • Poczym podczepiamy lokalny js
add_action( 'wp_enqueue_scripts', 'odpalSkryptKolorowaniaKodu2' );
function odpalSkryptKolorowaniaKodu2(){
    wp_enqueue_script('odpalSkrypty',  get_stylesheet_directory_uri().'/themejs/sajan-script.js?'.rand(0,999999999999999999), array('jquery'), null, true);
}
  • A w nim egzekwujemy kolorowanko
hljs.highlightAll();

Biblioteka fajnie z automatu wykrywa jezyki i stosuje odpowiednie kolorowanie składni we wszystkich elementach <code>

Opublikowane w

Video w headerze na wszystkich podstronach weentyseventeen

W lokalizacja theme/template-parts/header/header-image.php funkcja „the_custome_header_marker(); Zwraca media nagłówka w przypadku ustawienia w wordpressie video można je ustawić domyślnie w tweentyseventeen tylko na stronie głównej. Poniżej obejście w postaci zakomentowania funkcji i wrzucenia własnego obiektu video na sztywno:

<?php
/**
 * Displays header media
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since Twenty Seventeen 1.0
 * @version 1.0
 */

?>
<div class="custom-header">

		<div class="custom-header-media">
            
            <!-- sajan mod -->
            <video id="video-header-sajan" autoplay loop muted>
                <source src="http://postepstudio.pl/wp-content/uploads/przykladowe_video_postepstudio.mp4" type="video/mp4">
            </video>
			<?php /*the_custom_header_markup(); sajan*/ ?>
            
            
		</div>

	<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>

</div><!-- .custom-header -->
Opublikowane w

HTML5 Video element autoplay fail

Niektóre przeglądarki nie pozwalają na auto-odtwarzanie video dopóki użytkownik nie wykona jakiejś interakcji ze stroną. Wyjątkiem są wyciszeone filmy.

To Spowodowało mi problem z auto-odtwarzaniem video w headerze strony po załadowaniu. Rozwiązaniem jest dodanie do elementu <video> atrybutu „muted”

            <!-- sajan mod -->
            <video id="video-header-sajan" autoplay loop muted>
                <source src="http://postepstudio.pl/wp-content/uploads/przykladowe_video_postepstudio.mp4" type="video/mp4">
            </video>
Opublikowane w

Egzekwowanie własnych skryptów JavaScript i CSS w theme

W function.php nalerzy użyć funkcji wp_enqueue_script
Dokumentacja: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
W poniższym przykładzie umieściłem skrypt o nazwie „sajan-script.js” w folderze „themejs” w katalogu mojego theme.

function dodaj_wlasne_skrypty_js_do_stopki() {

    // Dodaj skrypt tylko na stronie głównej
    if (is_home()) {
        wp_enqueue_script('main-js', get_stylesheet_directory_uri() . '/js/main-site-sajan.js', array(), '1.0', true);
    }
    // śmigacz dodaj do głównej lub jak-pocmoc
    if(is_home || is_page('jak-pomoc')){
        wp_enqueue_script('smigacz', get_stylesheet_directory_uri() . '/js/smigacz-sajan.js', array(), '1.0', true);
    }
    //skrypt na kazda podstrone cookies itp
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/js/every-site-sajan.js', array(), '1.0', true);
}

add_action('wp_enqueue_scripts', 'dodaj_wlasne_skrypty_js_do_stopki');

Uwaga funkcja get_template_directory_uri() zwraca nie katalog bierzącego child theme tylko nadrzędnego dlatego należy używać get_stylesheet_directory_uri()

Po nazwie skryptu dodaje „?” i losową liczbę za pomocą funkcji rand(0,999999999999999999) aby przeglądarka nie cachowała skryptu.

Opublikowane w

Zmiana trybu edytora na ciemniejszy by nie jebał po oczach

W pliku [twójTheme]/assets/css/editor-blocks.css należy doidać poniższy skrawek kodu do stylów

/* ###############################################
                   DARK THEME sajan
############################################### */ 

.editor-styles-wrapper {
    max-width: 100% !important;
    background-color: #cdc8c8!important;
    margin: 0!important;
    padding-left: 50px!important;
}

.edit-post-header {
    background-color: #9f9f9f;
}

.components-button.is-tertiary {
    color: #004070;
    font-weight: bold;
}

.components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:active:enabled, .components-button.is-primary[aria-disabled=true]:enabled {
    color: #cdd5dd;
    background: #004070;
    border-color: #004070;
    font-weight: bold;
    opacity: 1;
    outline: none;
}

.components-button.is-primary {
    background: #004070;
}
Opublikowane w

Uwidocznienie grup w edytorze WP esitor (must have)

Parę styli bo editor-style.css, które modyfikują wygląd edytora wizualnego w WordPress’ie dla wygody działania, w szczególności z sekcjami i grupami.

{ Twoj projekt }\wp-content\themes\twentyseventeen\assets\css\editor-style.css

  • Rozszerza panel edytora (nie wiedzieć dlaczego taki wąski)
  • Uwidocznia Grupy „div” i „section”
  • Elementów Header i Footer
  • Oznacza nagłównik h1, h2, h3, h4
  • Oznaczenie paragrafów

@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@700&display=swap'); /*--- to wrzucić na początku css ---*/
/* #############################################################################################################################################
###############################################            MOJE STYLE EDYTORSKIE SAJAN           ###############################################
############################################################################################################################################# */ 


/*--------------------------------------------------------------- ELEMENT HEADER --------------------------------------------------*/

/* Oznaczenie grup <header> */
.block-editor-block-list__layout header::before{
    content: 'HEADER'!important;
    background: #0aed00!important;
    
    color: #fff!important;
    position: absolute!important;
    top: 0px!important;
    left: 0px!important;
    border-radius: 0 0 9px 0px!important;
    
    font-size: 11px!important;
    font-family: 'Ubuntu Mono', sans-serif!important;
    letter-spacing: 0.5px!important;
    padding: 0px 4px 0px 3px!important;
    
    width: unset!important;
    height: unset!important;
}

.block-editor-block-list__layout header {
    border: dashed 3px #0aed00;
    padding: 24px 8px 8px 8px!important;
}

/*--------------------------------------------------------------- ELEMENT FOOTER --------------------------------------------------*/

/* Oznaczenie grup <footer> */
.block-editor-block-list__layout footer::before {
    
    content: 'FOOTER'!important;
    background-color: #0aed00!important;
    
    color: #fff!important;
    position: absolute!important;
    top: 0px!important;
    left: 0px!important;
    border-radius: 0 0 9px 0px!important;
    
    font-size: 11px!important;
    font-family: 'Ubuntu Mono', sans-serif!important;
    letter-spacing: 0.5px!important;
    padding: 0px 4px 0px 3px!important;
    
    width: unset!important;
    height: unset!important;
}
.block-editor-block-list__layout footer {
    border: dashed 3px #0aed00;
    padding: 24px 8px 8px 8px!important;
}

/*--------------------------------------------------------------- GRUPY SECTION --------------------------------------------------*/

.block-editor-block-list__layout section.wp-block-group {
    border: dotted 5px #00900f;
    padding: 24px 8px 8px 8px!important;
    margin-top: 10px;
    margin-bottom: 10px;
}

.block-editor-block-list__layout section.wp-block-group::before {
    content: 'sekcja';
    font-size: 12px;
    font-weight: bold;
    background-color: #00900f;
    padding: 5px;
    color: #fff;
    position: relative;
    top: -17px;
    left: -15px;
    border-radius: 0 0 12px 0px;
}

/*--------------------------------------------------------------- GRUPY DIV --------------------------------------------------*/
.block-editor-block-list__layout div.wp-block-group {
    border: dashed 3px #f58787;
    padding: 24px 8px 8px 8px!important;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}
.block-editor-block-list__layout div.wp-block-group::before {
    content: 'DIV'!important;
    background-color: #f58787!important;
    
    color: #fff!important;
    position: absolute!important;
    top: 0px!important;
    left: 0px!important;
    border-radius: 0 0 9px 0px!important;
    
    font-size: 11px!important;
    font-family: 'Ubuntu Mono', sans-serif!important;
    letter-spacing: 0.5px!important;
    padding: 0px 4px 0px 3px!important;
    
    width: unset!important;
    height: unset!important;
}


/*--------------------------------------------------------------- PARAGRAFY --------------------------------------------------*/

.block-editor-block-list__layout p {
    border: dashed 1px;
    padding: 24px 8px 8px 8px!important;
}

.block-editor-block-list__layout p::before {
    content: 'P'!important;
    background-color: #000!important;
    
    color: #fff!important;
    position: absolute!important;
    top: 0px!important;
    left: 0px!important;
    border-radius: 0 0 9px 0px!important;
    
    font-size: 11px!important;
    font-family: 'Ubuntu Mono', sans-serif!important;
    letter-spacing: 0.5px!important;
    padding: 0px 4px 0px 3px!important;
    
    width: unset!important;
    height: unset!important;
}


/* Rozszerzenie panelu edytora */
.block-editor-block-list__layout .wp-block {max-width: unset;}
/* Oznaczenie nagłówków */
.block-editor-block-list__layout h1:before{content: 'H1';}
.block-editor-block-list__layout h2:before{content: 'H2';}
.block-editor-block-list__layout h3:before{content: 'H3';}
.block-editor-block-list__layout h4:before{content: 'H4';}
.block-editor-block-list__layout h1:before, h2:before, h3before, h4:before {
    font-weight: bold;
    font-family: monospace;
    font-size: 10px;
    background-color: #255093;
    padding: 4px;
    color: #fff;
    border-radius: 18px;
    position: relative;
    top: -18px;
}