Autor: ninja

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

Ś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 Extension – https://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 Office – https://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 Monkey – https://www.qrcode-monkey.com/
TEC IT – Tylko .png bez rejestracji – https://qrcode.tec-it.com/en

Wtyczki do chrome / Brave:

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

Opublikowane w

OpenSSL enable https:// virtual host on WAMP

na podstawie m innymi tego:

https://infyom.com/blog/how-to-enable-localhost-https-ssl-on-wamp-server

  • Odpakowuje zawartość paczki “openssl-1.0.2q-x64_86-win64.zip” (na drive w tym folderze) do “program files”.
  • Opdalam jako Admin “openssl.exe”.
  • Napotkałem na problem ze znalezieniem ”usr/config/oppenssl.cnf”.
  • Rejestruje zmienną srodowiskową w Edytuj zmienne :środowiskowe systemu windows” (pl).
  • Dodaje zmienną nazwa:”OPENSSL_CONF” wartość:”C:\wamp64\bin\apache\apache2.4.51\conf\openssl.cnf”(ścieżka do openssl.cnf w plikach instalacji wampa – scieżka może się różnić).
  • W konsoli openssl wpisuje komendę : “genrsa -aes256 -out private.key 2048”
  • wpowadzam chasło (od 4 znaów+), potwierdzam je i w katalogu openssl tworzy się plik klucza: private.key
  • Odpalam komende “req -new -x509 -nodes -sha1 -key private.key -out certificate.crt -days 36500” w celu stworzenia certyfikatu.
  • Uzupełniamy dane o stronie (w common name podajemy domenę pn. ‘gooddrut.pl’).
  • Tworzymy katalog ‘key’ w katalogu conf wampa “C:\wamp64\bin\apache\apache2.4.51\conf” (ścieżka może się różnić).
  • Z katalogu ‘openssl’ kopiujemy wygenerowany klucz i certyfikat do ‘conf’  (‘private.key’ i certificate.crt)
  • w katalogu conf otwieramy ‘httpd.conf’;
  • Odkomentowujemy w pliku trzy poniższe komendy:
    LoadModule ssl_module modules/mod_ssl.so
  • Include conf/extra/httpd-ssl.conf
  • LoadModule socache_shmcb_module modules/mod_socache_shmcb.s

(reszta do obczajenia)

Opublikowane w

Increasing Wp upload file max size

W media.php (wpływa na htacces)

w
wp/includes/media.php
modyfikuje filtr
return aply_filters (’upload_size_limit’,’TU_WAGA_W_BAJTACH’,’upload_size_limit’,’TU_WAGA_W_BAJTACH’,,’upload_size_limit’,’TU_WAGA_W_BAJTACH’,);

Php Ini

W plikach serwera /bin/php/php8.0.13/php.ini szukamy: „Maximum allowed size” i modyfikujemy.

; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
;upload_max_filesize = 2M sajan
upload_max_filesize = 16M

Po modyfikacji php.ini nalerzy zrestartować serwer aby uruchomić zmiany

.htaccess

doać kod:

php_value upload_max_filesize 64M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300