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ą.

WordPress child theme

  • 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

WEBP Converter for media exclude

Wykluczanie poszczególnych plików z konwersji na webp. Gdy konwersja skutkuje nieodpowiednią jakością.

Do nazwy wgrywanego pliku graficznego który, ma być pominięty, należy dodać końcówkę „-skipwebp”.

To exclude selected files use the following filter *(in this case with the suffix "-skipwebp" in a filename, e.g. image-skipwebp.png)*:

`add_filter( 'webpc_supported_source_file', function( bool $status, string $file_name, string $server_path ): bool {
    $excluded_suffix = '-skipwebp';
    if ( strpos( $file_name, $excluded_suffix . '.' ) !== false ) {
        return false;
    }
    return $status;
}, 10, 3 );`

Argument `$server_path` is the absolute server path to a directory or file. Inside the filters, you can apply more complicated rules as needed.

Filters run before images are converted - they no longer support converted images. You have to delete them manually if they should not be converted.

Należy pamiętać, że w przypadku dodania obrazka klasycznie przez cms, wordpress dorobi inne formaty obrazka i doda do nazw własne końcówki z rozdzielczością, które wykorzysta jako currentsource. Więc by wykluczenie działało poprawnie, trzeba dodać obrazek jako własny html.

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

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

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>