Wordpress Jenkler theme

Mikael

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

Mikael

Webassets

Webbspecifik kod lägger man upp med mediabiblioteket i Wordpress. Under utveckling så stänger vi av

Inställningar -> Media
Organisera mina uppladdade filer i kataloger enligt månad och år

Detta för att alla bilder, script och css skall hamna under i rooten på upload. När sedan kunden skall skriva inlägg så ska denna vara aktiv så att bilderna laddas upp i rätt struktur <år><månad>. Det går även bra att länka in kod från webben via kända CDN-källor om man vill det.

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

Settings
Activate by Default: on
Complete Uninstall: off
Code style: default
Indent With Tabs: off
Tab Size: 2
Indent Unit: 2
Wrap Lines: off
Line Numbers: on
Auto Close Brackets: off
Highlight Selection Matches: on

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)

Mikael

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