Wordpress Jenkler theme



  • Jenkler Theme widgets namnkonvention

    Länk: wordpress-theme-jenkler

    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.

    template-search (sök resultat för wordpress)
    template-single (Inlägg)
    template-archive-product (woocommerce sidor)
    template-single-product (woocommerce produktsida)

    Text

    text-<språk>-<permalänk>-<sektion>

    Dessa används för att kunder lättare skall kunna ändra innehåll på sidan och är valfria. Dessa används bara i kombination med (page-). Använd bara sektion ifall det är flera (text-) per (page-).

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



  • 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

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





  • 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)

 

Jenkler IT AB org.nr: 559082-6938   073-731 76 64   [email protected]