Wordpress Jenkler theme

Mikael

Jenkler Theme widgets namnkonvention

Språk: Vi använder 2 tecken som visar vilket språk det är (*en, sv, gb). Dock så skrivs standardspråket aldrig ut i namnet. Om sidan är engelsk så struntar vi i en och är den svensk så strunta vi i sv.

Globala

global-<namn>-<språk>

global-bottom (sidfot primärspråk)
global-bottom-en (sidfot engelska)
global-breadcrumb (länkstig primärspråk)
global-breadcrumb-en (länkstig engelska)
global-functions (endast för att lägga till php-kod i functions.php, inget språkstöd)
global-top (sidhuvud primärspråk)
global-top-en (sidhuvud engelska)

Meny

menu-<språk>-<section>

menu (huvudmeny)
menu-<menu> (Där <menu> är menyns section)

Sidor

page-<språk>-<permalänk>

Kod för att visa på alla sidor som skapas.

page (/)
page-en (/en/)
page-om-oss (/om-oss/)
page-en-about-us (/en/about-us/)

Templates

I dessa widgets så skriver man php-kod direkt och de finns som standard i tema filerna. Inget språkstöd. Genom att använda custom-mallar så kan man aktivera Gutenberg på ett ställe per sida.

template-index (standardmall för sidor)
template-page-custom-01 (custom-mall 1 för sidor)
template-page-custom-02 (custom-mall 2 för sidor)
template-search (sök resultat för wordpress)
template-single (standardmall för Inlägg)
template-archive-product (woocommerce sidor)
template-single-product (woocommerce produktsida)

Text

När det gäller texter så använder vi anpassade fält med taggen [cf]<namn>[/cf]. Namnstandard för anpassade fält är text-<sektion>.

Mikael

Webassets

Webbspecifik kod lägger vi under /wp-content/themes/jenkler/assets/. Det går även bra att länka in kod från webben via kända CDN-källor. Vi använder Inject head funktionen för att sätta upp assets. Jag ska försöka uppdatera exempelkoden nedan så det är den senaste.

Fonts

Font Awesome - För ikoner på siten. Använd SVG & JS

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

Google Fonts - Använd embed och custumize för att ställa in rätt kod på siten.

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

Bootstrap

Get Bootstrap - Eftersom jquery är inkluderat i Wordpress så länkar vi ej in det.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

När det gäller bootstrap.css filen så använder vi node-sass för att generera den. Den filen läggs sedan in under temakatalogen/assets/css. Glöm inte att slå på Development Mode i Cloudflare under utveckling.

Mikael

Webbdokumentation

Plugin:

Widget Wrangler (för att kunna skapa innehåll och placera shortcodes)
WPML för språk

Mikael

Kodningsstandard

Använd 2 space istället för tab
Sätt inte startbracket på ny rad
Använd samma namnstruktur som gruntprojektet har (camelCase i Nodejs, underscore_case i Wordpress)