Tag: wp

Opublikowane w

Google Analytics gTag WP theme

functions.php

function dodaj_wlasne_skrypty_js_do_stopki() {
    wp_enqueue_script('analitics1', "https://www.googletagmanager.com/gtag/js?id=G-0NE58HHDK8", array(), '1.0', true);
    wp_enqueue_script('analitics2', get_stylesheet_directory_uri() . '/js/gtag.js', array(), '1.0', true);
}

add_action('wp_enqueue_scripts', 'dodaj_wlasne_skrypty_js_do_stopki');

/js/gtag.js

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-0NE58HHDK8');// Tutaj identyfikator śledzenia
Opublikowane w

Wp FSE navigation breakpoint mobile/desktop menu


/*/////////////////////////////////////////////////// NAVIGATION BREAJKPOINT ////////////////////////////////////////////////////*/

/* Change the WordPress default css to a 1023px media query */
@media (min-width: 796px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}
/* Remove the WordPress default for 600px */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}
Opublikowane w

Menu FSE mobile animowany zjazd wyjazd

Domyślnie zamknięte manu ma display none, zmieniamy mu klasę na display flax tak jak otwarte i nadajemu mu ujemny „top” o jego wysokość , aby schować je nad krawędzią obrazu.
Ustalamy transition dla top.

    #modal-1 {

        transition:top 0.4s;
        top: -277px;/* wysokość menu */
        display: flex;
    }

Wszystko co pozostaje to gdy jest otwarte i dostaje klase is-menu-open zmieniamy top na 0;

   #modal-1.is-menu-open{
        top: 0px;
   }
Opublikowane w

WordPress child theme

Child Themes
  • W katalogo themes tworzymy folder o nazwie naszego motywu. Dobrą zalecaną praktyką jest nazwanie motywów potomnych nazwą motywu rodzica z końcówką „-child”.
  • Jedynym wymaganym plikiem w motywie potomnym jest plik styles.css z odpowiednią deklaracją w komentarzu na początku przykładowa deklaracja poniżej:
/*
Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfifteen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twentyfifteenchild
*/
  • z czego jedynie „Theme Name” oraz „Template” są wymagane.
  • W pliku functions.php nalerzy wciągnąć rodzicielski motyw za pomocą funkcji

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function my_theme_enqueue_styles() {
    $parenthandle = 'twentyseventeen-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        //$theme->get('Version') // this only works if you have Version in the style header
    );
}
  • W CMS’ie należy uruchomić pochodny styl
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

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

WP wtyczki (must have)

Backup / Migracja:

  • all-in-one-wp-migration
  • all-in-one-wp-migration-unlimited-extension

Bezpieczeństwo:

Formularze:

  • contact-form-7

Galerie:

  • foogallery
  • foobox-image-lightbox

Kontrola:

  • simple-history

Media library

Porządek:

  • simple-page-ordering

SEO: