Wordpress Jenkler theme



  • Jenkler 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-footer (html-fot) - uni, footer, inget språkstöd
    global-functions (blandade små funktioner) - php, run everywhere, inget språkstöd
    global-functions-navwalker (walker för menysystem) - php, run everywhere, inget språkstöd
    global-header (html-head) - uni, head, inget språkstöd
    global-map (mappning mellan template fil och template implementation) - php, run everywhere, inget språkstöd

    -- OLD WW --
    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-mail (hanterar formulär-POST-data)
    global-top (sidhuvud primärspråk)
    global-top-en (sidhuvud engelska)
    -- OLD WW --

    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

    template-home (arkivsida för blogginlägg) - uni, shortcode, inget språkstöd
    template-index (standardmall för sidor) - uni, shortcode, inget språkstöd

    -- OLD WW --
    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-page-custom-01 (custom-mall 1 för sidor)
    template-page-custom-02 (custom-mall 2 för sidor)
    template-search (sökresultat för wordpress)
    template-single (standardmall för Inlägg)
    template-archive (kategori- och tag-sidor)
    template-archive-product (woocommerce sidor)
    template-single-product (woocommerce produktsida)
    -- OLD WW --

    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>. Observera att detta med anpassade fält endast ska användas för sidor och inte tex i Widget Wrangler.



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


  • Mallar

    Defaultmallar som kan vara bra att använda om det skulle försvinna från dev

    Mail back

    <?php
    function j_mail() {
      $message = strip_tags(trim($_POST["message"]));
      if(strstr($message, '://')) {
        sleep(2);
        wp_die('', 200);
        return;
      }
      $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
      $name = strip_tags(trim($_POST["name"]));
      $phone = strip_tags($_POST['phone']);
    
      if(!filter_var($email, FILTER_VALIDATE_EMAIL) || empty($message) || empty($name) || empty($phone)) {
        wp_die('', 400);
        return;
      }
    
      $body = "Name: $name<br>";
      $body .= "Number: $phone<br>";
      $body .= "Email: $email<br>";
      $body .= "Message: $message<br>";
    
      $to = '[email protected]';
      $subject = "Form: dev.jenkler.com - $email";
      $headers[] = "Content-Type: text/html; charset=UTF-8";
      $headers[] = "Reply-To: $name <$email>";
    
      if(wp_mail($to, $subject, $body, $headers)) wp_die('', 200);
      else wp_die('', 400);
    }
    add_action('admin_post_mail', 'j_mail');
    add_action('admin_post_nopriv_mail', 'j_mail');
    ?>
    

    Mail front

    <h2>Kontakta oss gärna genom att fylla i uppgifterna</h2>
    
    <form action="/wp-admin/admin-post.php" id="ajax-contact" method="post">
    <input type="hidden" name="action" value="mail">
    <div class="form-group">
    <label for="name">Namn</label>
    <input type="name" name="name" class="form-control" id="name" placeholder="Vad är ditt namn?" required="">
    </div>
    <div class="form-group">
    <label for="phone">Nummer</label>
    <input type="name" name="phone" class="form-control" id="phone" placeholder="Vilket telefonnummer kan vi nå dig på?" required="">
    </div>
    <div class="form-group">
    <label for="email">Email</label>
    <input type="email" name="email" class="form-control" id="email" placeholder="Vad har du för e-postadress?" required="">
    </div>
    <div class="form-group">
    <label>Meddelande</label>
    <textarea class="form-control" name="message" placeholder="Beskriv kort vad behöver du hjälp med? Notera att meddelanden som innehåller länkar kommer automatiskt att raderas." rows="3" required=""></textarea>
    </div>
    <input type="submit" class="btn btn-primary" value="Skicka">
    </form>
    <br>
    <h4>
    <div id="form-error" style="display: none;">
    Någonting gick fel, maila gärna manuellt till adressen i foten på sidan.
    </div>
    <div id="form-ok" style="display: none;">
    Tack för ditt meddelande! Jag återkommer så snart jag kan.
    </div>
    </h4>
    
    <script>
        var form = jQuery('#ajax-contact');
        var formMessages = jQuery('#form-messages');
    
        jQuery(form).submit(function(event)
        {
            event.preventDefault();
            var formData = jQuery(form).serialize();
            jQuery.ajax({
                type: 'POST',
                url: jQuery(form).attr('action'),
                data: formData
            }).done(function(response) {
               jQuery("#form-error").hide();           
               jQuery("#form-ok").show();
                jQuery(form).remove();            
            }).fail(function(data) {
               jQuery("#form-error").show();
               jQuery("#form-ok").hide();
            });
        });
    </script>
    

    global-functions

    function j_is_path($match = '') {
      global $j_path;
      if($match == '') return $j_path.'/';
      else return strtolower($match) == $j_path ? true : false;
    }
    
    function j_textfields($atts, $content) {
      global $j_page_id;
      return get_post_meta($j_page_id, $content, true);
    }
    $j_path = strtolower(trim(current(explode('?', $_SERVER['REQUEST_URI'], 2)), '/'));
    
    if(!is_admin()) {
      if(j_is_path() == '/') $j_page_id = get_option('page_on_front');
      else {
        $j_page_id = get_page_by_path(j_is_path());
        $j_page_id = isset($j_page_id->ID) ? $j_page_id->ID : 0;
      }
      add_shortcode('cf','j_textfields');
      wp_enqueue_script('jquery');
      //wp_enqueue_style('jenkler', get_template_directory_uri().'/assets/custom.css');
      wp_enqueue_style('dev', 'https://files.jenkler.com/_README/tmp/tmp/mastercoach.css?'.rand());
    }
    

    global-header

    <meta charset="<?php bloginfo('charset')?>" />
    <?php if(get_bloginfo('description') != '') { echo '<meta name="description" content="'.get_bloginfo('description').'">'; }?>
    <meta name="author" content="Jenkler IT AB">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?php wp_title()?></title>
    

    global-map

    if(!is_admin()) {
      function j_global_map_home() {
        get_header();
        echo do_shortcode('[wbcr_snippet id="2722"]');
        get_footer();
      }
      function j_global_map_index() {
        get_header();
        echo do_shortcode('[wbcr_snippet id="2718"]');
        get_footer();
      }
    }
    

 

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