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

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;
    }
}

Twentyseventeen Simple Page instrukcje

Instalacja WP z wtyczką do migracji i czystym pochodnym theme dla twentyseventeen

Jednolity Banner na górze

W pochodnym theme tworzymy plika /assets/header/custome-header
W tym pliku podmieniamy całość na swoją konstrukcję, najprościej po prostu goły obrazek img w celu łatwej edycji i będzie on z automatu trzymał proporcje i tak samo zachowywał się na mainie jak i podstronach.

Dziura nad Menu

Nad manu robi się dziura mimo nadania marginów paddingów i borderów na 0 zarówno dla banneru jak i menu. I jest trudna do wyśledzeenia co ją powoduję.
Naprawieniem tej sytuacji jest nadanie:

.site-header {
    line-height: 0;
}

Układ jednej kolumny

W ustawieniach motywu strona główna musi być ustawiona na „static page” by w opcjach pojawiło się „opcje motywu” gdzie możemy ustawić tryb jednej kolumny.

Hagłówki H1

W Twentyseventeen i większości szablonów tytuł strony z automatu wskakuje w treść jako h1 lub h2 dla głównej . Aby mieć kontrolę nad SEO najlepiej to wywalić i tworzyć sobie H1 w treśći podsdtony manualnie tak jak resztę n agłówków w tym celu w szablonie w teplate-parts/page/content-page.php należy wywalić/ zakomentować

	<header class="entry-header">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
		<?php  twentyseventeen_edit_link( get_the_ID() ); ?>
	</header><!-- .entry-header -->

i w content-front-page.php:

			<header class="entry-header">
				<?php  the_title( '<h2 class="entry-title">', '</h2>' ); ?>

				<?php twentyseventeen_edit_link( get_the_ID() ); ?>

			</header><!-- .entry-header -->

W ten sposób separujemy też nazwę podstrony od nagłówka H1 i wszystko mamy pod kontrolą.

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;
}

Środowisko pracy setup- Potrzebne programy, wtyczki itp (must have)

Lista ustawień, programów linków potrzebnych aby wygodnie przygotować sobie środowisko pracy.

Ustawienia:

  • Tryb ciemny Windows – W ustawienia/kolory.
  • Tryb ciemny dla edytora stron WordPress tutaj
  • Pokaż rozszerzenia – W opcje folderów „odptaszkować” opcje „ukryj rozszerzenia znanych plików.
  • Wtyczki WP – Odpowiednie wtyczki ułatwiające prace na Wordpresie – tutaj

Programy:

Co do programów bezpiecznym źródłem dla wszelkiego open source softu jest SourceForge.

  • WAMPserver – Środowisko serwerowe dla Windowsa (Apache, MySQL, PHP). https://sourceforge.net/projects/wampserver/
  • Brackets – Zajebisty darmowy Edytor kodu z podpowiadaniem funkcji itp. https://brackets.io/
  • Wtyczka Synapse do brackets pozwala działać bezpośrednio na docelowym serwerze
  • Font Base– Profesjonalny manager fontów, Zintegrowany z Google Fonts. Szybko aktywuje wszystkie Google Fonts na komputerze bez konieczności instalacji. https://fontba.se/
  • Brave – Najlepsza bardzo konfigurowalna przeglądarka na silniku chromium, z wbudowanym skutecznym blokowaniem reklam.
  • FileZilla – Klient FTP co tu dużo mówić. https://filezilla-project.org/
  • Sage Thumbs – Programik generujący w Exploratorze Windows podglądy zawartości takich plików jak .psd .ai .eps i wiele innych. https://sourceforge.net/projects/sagethumbs/
  • SVG shell Extensionhttps://github.com/tibold/svg-explorer-extension/releases
  • Keepass2 – Niezawodny manager haseł dostrępny na Windows i Androida, dobrze jest trzymać bazę na GDrivie i ustawić synchronizację.
  • Keepas2 Google Sync Plugin [fork] – Wtyczka synchronizacyjna dla Windowsowej wersji desktopowej (mobilnama tą funkcję wbudowaną), oryginalna wersja od jakiegoś czasu nie działa jest za to bardzo dobry fork. https://github.com/walterpg/google-drive-sync/releases
  • Spotify -Niestety apka desktop jebie reklamami. Lepiej korzystać w Brave z onlineowej wersji reklamy są blokowane: https://open.spotify.com/ Mod dla Androida bez reklam:
  • Clockify – Zajebisty, darmowy i prosty tracker czasu pracy nad projektami.
  • QTabBar – Alternatywa dla niegdysiejszego „Clovera”. Rozszerza Eksploaratora Windows o funkcje tabów. http://qttabbar.wikidot.com/ Ostatnia stabilna wersja nie działała mi na win 10 za to nowsza beta owszem. Instalki również na GDrivie w „PROGRAMY”.
  • 7-zip darmowy kompresor obsługujący format RAR
  • Libre Officehttps://pl.libreoffice.org/
  • InkScape – darmowy program open source do vektorów – https://inkscape.org/

Online:

Online SEO:

Darmowe Stocki:

Portale z darmowymi zdjęciami, ilustracjami czasem i video stockowymi na lkicencji zwykle CC0, czasem na tej wymagającej wskazania atrybucji autora w projekcie.

QR code generators

QRCode Monkeyhttps://www.qrcode-monkey.com/
TEC IT – Tylko .png bez rejestracji – https://qrcode.tec-it.com/en

Wtyczki do chrome / Brave: