По-бързи, по-достъпни, по-успешни

Милен Петрински - Гонзо

Кой?

Гонзо Виелицата

Милен Петрински - Гонзо

http://greatgonzo.net

@gonzomir

Защо?

Пример


  <script type="text/javascript">
      window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/terminal3.bg\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.5.4"}};
      !function(a,b,c){function d(a){var c,d,e,f=b.createElement("canvas"),g=f.getContext&&f.getContext("2d"),h=String.fromCharCode;if(!g||!g.fillText)return!1;switch(g.textBaseline="top",g.font="600 32px Arial",a){case"flag":return g.fillText(h(55356,56806,55356,56826),0,0),f.toDataURL().length>3e3;case"diversity":return g.fillText(h(55356,57221),0,0),c=g.getImageData(16,16,1,1).data,d=c[0]+","+c[1]+","+c[2]+","+c[3],g.fillText(h(55356,57221,55356,57343),0,0),c=g.getImageData(16,16,1,1).data,e=c[0]+","+c[1]+","+c[2]+","+c[3],d!==e;case"simple":return g.fillText(h(55357,56835),0,0),0!==g.getImageData(16,16,1,1).data[0];case"unicode8":return g.fillText(h(55356,57135),0,0),0!==g.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
    </script>
    <style type="text/css">
img.wp-smiley,
img.emoji {
  display: inline !important;
  border: none !important;
  box-shadow: none !important;
  height: 1em !important;
  width: 1em !important;
  margin: 0 .07em !important;
  vertical-align: -0.1em !important;
  background: none !important;
  padding: 0 !important;
}
</style>
<link rel='stylesheet' id='avatar-manager-css'  href='/wp-content/plugins/avatar-manager/assets/css/avatar-manager.min.css?ver=1.2.1' type='text/css' media='all' />
<link rel='stylesheet' id='rs-plugin-settings-css'  href='/wp-content/plugins/revslider/rs-plugin/css/settings.css?ver=4.6.93' type='text/css' media='all' />
<style id='rs-plugin-settings-inline-css' type='text/css'>
.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}
</style>
<link rel='stylesheet' id='tp-comfortaa-css'  href='http://fonts.googleapis.com/css?family=%40import+url%28https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DComfortaa&subset=latin%2Ccyrillic-ext%29%3B&ver=4.5.4' type='text/css' media='all' />
<link rel='stylesheet' id='tp-new-css'  href='http://fonts.googleapis.com/css?family=Comfortaa%3A400%2C300%2C700&ver=4.5.4' type='text/css' media='all' />
<link rel='stylesheet' id='tp-open-sans-condensed-css'  href='http://fonts.googleapis.com/css?family=https%3A%2F%2Fwww.google.com%2Ffonts&ver=4.5.4#QuickUsePlace:quickUse/Family:Open+Sans+Condensed:300/Script:cyrillic' type='text/css' media='all' />
<link rel='stylesheet' id='tp-forum-css'  href='http://fonts.googleapis.com/css?family=https%3A%2F%2Fwww.google.com%2Ffonts&ver=4.5.4#QuickUsePlace:quickUse/Family:Forum/Script:cyrillic-ext' type='text/css' media='all' />
<link rel='stylesheet' id='tp-play-css'  href='http://fonts.googleapis.com/css?family=https%3A%2F%2Fwww.google.com%2Ffonts&ver=4.5.4#QuickUsePlace:quickUse/Family:Play/Script:cyrillic' type='text/css' media='all' />
<link rel='stylesheet' id='tp-poiret-one-css'  href='http://fonts.googleapis.com/css?family=https%3A%2F%2Fwww.google.com%2Ffonts&ver=4.5.4#QuickUsePlace:quickUse/Family:Poiret+One/Script:cyrillic' type='text/css' media='all' />
<link rel='stylesheet' id='tp-exo-2-css'  href='http://fonts.googleapis.com/css?family=https%3A%2F%2Fwww.google.com%2Ffonts&ver=4.5.4#QuickUsePlace:quickUse/Family:Exo+2:500/Script:cyrillic' type='text/css' media='all' />
<link rel='stylesheet' id='tp-russoone-css'  href='http://fonts.googleapis.com/css?family=https%3A%2F%2Fwww.google.com%2Ffonts&ver=4.5.4#QuickUsePlace:quickUse/Family:Russo+One/Script:cyrillic' type='text/css' media='all' />
<link rel='stylesheet' id='tp-noto-serif-css'  href='http://fonts.googleapis.com/css?family=https%3A%2F%2Fwww.google.com%2Ffonts&ver=4.5.4#QuickUsePlace:quickUse/Family:Noto+Serif/Script:cyrillic' type='text/css' media='all' />
<link rel='stylesheet' id='tp-pt-serif-css'  href='http://fonts.googleapis.com/css?family=https%3A%2F%2Fwww.google.com%2Ffonts&ver=4.5.4#ChoosePlace:select/Collection:PT+Serif/Script:cyrillic' type='text/css' media='all' />
<link rel='stylesheet' id='google_font_open_sans-css'  href='http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C600%2C700&subset=cyrillic%2Ccyrillic-ext&ver=4.5.4' type='text/css' media='all' />
<link rel='stylesheet' id='google_font_roboto_cond-css'  href='http://fonts.googleapis.com/css?family=Roboto+Condensed%3A300italic%2C400italic%2C700italic%2C400%2C300%2C700&subset=cyrillic%2Ccyrillic-ext&ver=4.5.4' type='text/css' media='all' />
<link rel='stylesheet' id='js_composer_front-css'  href='/wp-content/plugins/js_composer/assets/css/js_composer.min.css?ver=4.11.2' type='text/css' media='all' />
<link rel='stylesheet' id='td-theme-css'  href='/wp-content/themes/Newsmag/style.css?ver=2.1.1' type='text/css' media='all' />
<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='/wp-content/plugins/avatar-manager/assets/js/avatar-manager.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js?ver=4.6.93'></script>
<script type='text/javascript' src='/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.93'></script>
<script type="text/javascript">
      jQuery(document).ready(function() {
        // CUSTOM AJAX CONTENT LOADING FUNCTION
        var ajaxRevslider = function(obj) {

          // obj.type : Post Type
          // obj.id : ID of Content to Load
          // obj.aspectratio : The Aspect Ratio of the Container / Media
          // obj.selector : The Container Selector where the Content of Ajax will be injected. It is done via the Essential Grid on Return of Content

          var content = "";

          data = {};

          data.action = 'revslider_ajax_call_front';
          data.client_action = 'get_slider_html';
          data.token = 'b5c84dacb2';
          data.type = obj.type;
          data.id = obj.id;
          data.aspectratio = obj.aspectratio;

          // SYNC AJAX REQUEST
          jQuery.ajax({
            type:"post",
            url:"/wp-admin/admin-ajax.php",
            dataType: 'json',
            data:data,
            async:false,
            success: function(ret, textStatus, XMLHttpRequest) {
              if(ret.success == true)
                content = ret.data;
            },
            error: function(e) {
              console.log(e);
            }
          });

           // FIRST RETURN THE CONTENT WHEN IT IS LOADED !!
           return content;
        };

        // CUSTOM AJAX FUNCTION TO REMOVE THE SLIDER
        var ajaxRemoveRevslider = function(obj) {
          return jQuery(obj.selector+" .rev_slider").revkill();
        };

        // EXTEND THE AJAX CONTENT LOADING TYPES WITH TYPE AND FUNCTION
        var extendessential = setInterval(function() {
          if (jQuery.fn.tpessential != undefined) {
            clearInterval(extendessential);
            if(typeof(jQuery.fn.tpessential.defaults) !== 'undefined') {
              jQuery.fn.tpessential.defaults.ajaxTypes.push({type:"revslider",func:ajaxRevslider,killfunc:ajaxRemoveRevslider,openAnimationSpeed:0.3});
              // type:  Name of the Post to load via Ajax into the Essential Grid Ajax Container
              // func: the Function Name which is Called once the Item with the Post Type has been clicked
              // killfunc: function to kill in case the Ajax Window going to be removed (before Remove function !
              // openAnimationSpeed: how quick the Ajax Content window should be animated (default is 0.3)
            }
          }
        },30);
      });
    </script>
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <meta name="generator" content="Powered by Visual Composer - drag and drop page builder for WordPress."/>
<!--[if lte IE 9]><link rel="stylesheet" type="text/css" href="/wp-content/plugins/js_composer/assets/css/vc_lte_ie9.min.css" media="screen"><![endif]--><!--[if IE  8]><link rel="stylesheet" type="text/css" href="/wp-content/plugins/js_composer/assets/css/vc-ie8.min.css" media="screen"><![endif]-->
<!-- JS generated by theme -->

<script>


var td_blocks = []; //here we store all the items for the current page

//td_block class - each ajax block uses a object of this class for requests
function td_block() {
    this.id = '';
    this.block_type = 1; //block type id (1-234 etc)
    this.atts = '';
    this.td_column_number = '';
    this.td_current_page = 1; //
    this.post_count = 0; //from wp
    this.found_posts = 0; //from wp
    this.max_num_pages = 0; //from wp
    this.td_filter_value = ''; //current live filter value
    this.td_filter_ui_uid = ''; //used to select a item from the drop down filter
    this.is_ajax_running = false;
    this.td_user_action = ''; // load more or infinite loader (used by the animation)
    this.header_color = '';
    this.ajax_pagination_infinite_stop = ''; //show load more at page x
}



        // td_js_generator - mini detector
        (function(){
            var html_tag = document.getElementsByTagName("html")[0];

            if(navigator.userAgent.indexOf("MSIE 10.0") > -1) {
                html_tag.className+=' ie10';
            }

            if(!!navigator.userAgent.match(/Trident.*rv\:11\./)) {
                html_tag.className+=' ie11';
            }

            if (/(iPad|iPhone|iPod)/g.test( navigator.userAgent )) {
                html_tag.className+=' td-md-is-ios';
            }

            var user_agent = navigator.userAgent.toLowerCase();
            if(user_agent.indexOf("android") > -1) {
                html_tag.className+=' td-md-is-android';
            }

            if (navigator.userAgent.indexOf('Mac OS X') != -1) {
                html_tag.className+=' td-md-is-os-x';
            }

            if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
               html_tag.className+=' td-md-is-chrome';
            }

            if (navigator.userAgent.indexOf('Firefox') != -1) {
                html_tag.className+=' td-md-is-firefox';
            }

            if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
                html_tag.className+=' td-md-is-safari';
            }

        })();


var tds_smooth_scroll=true;
var td_viewport_interval_list=[{"limit_bottom":767,"sidebar_width":251},{"limit_bottom":1023,"sidebar_width":339}];
var td_animation_stack_effect="type0";
var tds_animation_stack=true;
var td_animation_stack_specific_selectors=".entry-thumb, img";
var td_animation_stack_general_selectors=".td-animation-stack img, .post img";
var td_ajax_url="\/wp-admin\/admin-ajax.php?td_theme_name=Newsmag&v=2.1.1";
var td_get_template_directory_uri="http:\/\/terminal3.bg\/wp-content\/themes\/Newsmag";
var tds_snap_menu="";
var tds_logo_on_sticky="show";
var tds_header_style="3";
var td_please_wait="\u041c\u043e\u043b\u044f \u0438\u0437\u0447\u0430\u043a\u0430\u0439\u0442\u0435...";
var td_email_user_pass_incorrect="\u041f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0441\u043a\u043e \u0438\u043c\u0435 \u0438\u043b\u0438 \u043f\u0430\u0440\u043e\u043b\u0430 \u0441\u0430 \u0433\u0440\u0435\u0448\u043d\u0438!";
var td_email_user_incorrect="\u0418\u043c\u0435\u0439\u043b \u0438\u043b\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0441\u043a\u043e \u0438\u043c\u0435 \u0441\u0430 \u0433\u0440\u0435\u0448\u043d\u0438!";
var td_email_incorrect="\u0413\u0440\u0435\u0448\u0435\u043d \u0438\u043c\u0435\u0439\u043b!";
var tds_more_articles_on_post_enable="show";
var tds_more_articles_on_post_time_to_wait="";
var tds_more_articles_on_post_pages_distance_from_top=5000;
var tds_theme_color_site_wide="#4db2ec";
var tds_smart_sidebar="";
var td_theme_v="Mi4xLjE=";
var td_theme_n="TmV3c21hZw==";
var td_magnific_popup_translation_tPrev="Previous (Left arrow key)";
var td_magnific_popup_translation_tNext="Next (Right arrow key)";
var td_magnific_popup_translation_tCounter="%curr% \u043d\u0430 %total%";
var td_magnific_popup_translation_ajax_tError="\u0441\u044a\u0434\u044a\u0440\u0436\u0430\u043d\u0438\u0435\u0442\u043e \u043e\u0442 %url% \u043d\u0435 \u043c\u043e\u0436\u0435 \u0434\u0430 \u0431\u044a\u0434\u0435 \u0437\u0430\u0440\u0435\u0434\u0435\u043d.";
var td_magnific_popup_translation_image_tError="#%curr% \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u0442\u043e \u043d\u0435 \u043c\u043e\u0436\u0435 \u0434\u0430 \u0441\u0435 \u0437\u0430\u0440\u0435\u0434\u0438.";
var td_ad_background_click_link="";
var td_ad_background_click_target="";
</script>


<!-- Header style compiled by theme -->

<style>

.td-pb-row [class*="td-pb-span"],
    .td-pb-border-top,
    .page-template-page-title-sidebar-php .td-page-content > .wpb_row:first-child,
    .td-post-sharing,
    .td-post-content,
    .td-post-next-prev,
    .author-box-wrap,
    .td-comments-title-wrap,
    .comment-list,
    .comment-respond,
    .td-post-template-5 header,
    .td-container,
    .wpb_content_element,
    .wpb_column,
    .wpb_row,
    .white-menu .td-header-style-1 .td-header-main-menu,
    .white-menu .td-header-style-2 .td-header-main-menu,
    .white-menu .td-header-style-3 .td-header-main-menu,
    .white-menu .td-header-style-4 .td-header-main-menu,
    .white-menu .td-header-style-5 .td-header-main-menu,
    .white-menu .td-header-style-6 .td-header-main-menu,
    .white-menu .td-header-style-7 .td-header-main-menu,
    .white-menu .td-header-style-8 .td-header-main-menu,
    .white-menu .td-header-style-9 .td-header-main-menu,
    .td-header-style-6 .td-header-container,
    .td-post-template-1 .td-post-content,
    .td-post-template-4 .td-post-sharing-top,
    .td-header-style-6 .td-header-header .td-make-full,
    #disqus_thread {
        border-color: #e6e6e6;
    }
    .td-top-border {
        border-color: #e6e6e6 !important;
    }
    .td-container-border:after,
    .td-next-prev-separator {
      background-color: #e6e6e6;
    }
    @media (max-width: 767px) {
      .white-menu .td-header-main-menu {
          border-color: #e6e6e6;
        }
    }




    .td-page-content p,
    .td-page-content .td_block_text_with_title {
      color: #444444;
    }

    .top-header-menu li a,
    .td-header-sp-top-menu .td_data_time {
        text-transform:uppercase;

    }

    .top-header-menu .menu-item-has-children li a {
      text-transform:uppercase;

    }

    .sf-menu > .td-menu-item > a {
        font-size:12px;
  text-transform:uppercase;

    }

    .sf-menu ul .td-menu-item a {
        text-transform:uppercase;

    }

    .td_mod_mega_menu .item-details a {
        text-transform:uppercase;

    }

    .td_mega_menu_sub_cats .block-mega-child-cats a {
        text-transform:uppercase;

    }

    .td-mobile-content #menu-main-menu > li > a {
        text-transform:uppercase;

    }

    .td-mobile-content .sub-menu a {
        text-transform:uppercase;

    }



  .td_module_wrap .entry-title a,
  .td-theme-slider .td-module-title a,
  .page .td-post-template-6 .td-post-header h1 {
    font-family:"PT Sans";

  }


    .td_module_1 .td-module-title a {
      text-transform:uppercase;

    }

    .td_module_2 .td-module-title a {
      text-transform:uppercase;

    }

    .td_module_3 .td-module-title a {
      text-transform:uppercase;

    }

    .block-title > span,
    .block-title > a,
    .widgettitle,
    .wpb_tabs li a,
    .td-related-title .td-related-left,
    .td-related-title .td-related-right,
    .category .entry-title span,
    .td-author-counters span,
    .woocommerce-tabs h2,
    .woocommerce .product .products h2 {
        font-family:"PT Serif Caption";
  text-transform:uppercase;

    }

    .td-excerpt,
    .td-module-excerpt {
        font-size:13px;

    }



    .td-big-grid-post .entry-title {
        font-family:"PT Sans";

    }

    .td_block_big_grid .td-big-thumb .entry-title,
    .td_block_big_grid_2 .td-big-thumb .entry-title,
    .td_block_big_grid_3 .td-big-thumb .entry-title,
    .td_block_big_grid_4 .td-big-thumb .entry-title,
    .td_block_big_grid_5 .td-big-thumb .entry-title,
    .td_block_big_grid_6 .td-big-thumb .entry-title,
    .td_block_big_grid_7 .td-big-thumb .entry-title {
        font-family:"PT Sans Caption";
  text-transform:uppercase;

    }

    .td_block_big_grid .td-medium-thumb .entry-title,
    .td_block_big_grid_2 .td-medium-thumb .entry-title,
    .td_block_big_grid_3 .td-medium-thumb .entry-title,
    .td_block_big_grid_4 .td-medium-thumb .entry-title,
    .td_block_big_grid_5 .td-medium-thumb .entry-title,
    .td_block_big_grid_6 .td-medium-thumb .entry-title,
    .td_block_big_grid_7 .td-medium-thumb .entry-title {
        font-family:"PT Sans Caption";
  text-transform:uppercase;

    }

    .td_block_big_grid .td-small-thumb .entry-title,
    .td_block_big_grid_2 .td-small-thumb .entry-title,
    .td_block_big_grid_3 .td-small-thumb .entry-title,
    .td_block_big_grid_4 .td-small-thumb .entry-title,
    .td_block_big_grid_5 .td-small-thumb .entry-title,
    .td_block_big_grid_6 .td-small-thumb .entry-title,
    .td_block_big_grid_7 .td-small-thumb .entry-title {
        font-family:"PT Sans";
  text-transform:uppercase;

    }

    .td_block_big_grid .td-tiny-thumb .entry-title,
    .td_block_big_grid_2 .td-tiny-thumb .entry-title,
    .td_block_big_grid_3 .td-tiny-thumb .entry-title,
    .td_block_big_grid_4 .td-tiny-thumb .entry-title,
    .td_block_big_grid_5 .td-tiny-thumb .entry-title,
    .td_block_big_grid_6 .td-tiny-thumb .entry-title,
    .td_block_big_grid_7 .td-tiny-thumb .entry-title {
        font-family:"PT Sans Narrow";
  text-transform:uppercase;

    }









  .post header .entry-title {
    font-family:"PT Sans Caption";

  }


    .td-post-template-default header .entry-title {
        font-family:"PT Sans";
  font-size:30px;
  font-style:normal;
  font-weight:normal;
  text-transform:uppercase;

    }

    .td-post-template-1 header .entry-title {
        font-size:37px;
  text-transform:uppercase;

    }

    .td-post-template-2 header .entry-title {
        text-transform:uppercase;

    }

    .td-post-template-3 header .entry-title {
        text-transform:uppercase;

    }

    .td-post-template-4 header .entry-title {
        text-transform:uppercase;

    }

    .td-post-template-5 header .entry-title {
        text-transform:uppercase;

    }

    .td-post-template-6 header .entry-title {
        text-transform:uppercase;

    }

    .td-post-template-7 header .entry-title {
        text-transform:uppercase;

    }

    .td-post-template-8 header .entry-title {
        text-transform:uppercase;

    }





    .td-post-content p,
    .td-post-content {
        font-family:"PT Sans";
  font-size:18px;
  font-style:normal;
  font-weight:normal;

    }

    .post blockquote p,
    .page blockquote p,
    .td-post-text-content blockquote p {
        font-family:"PT Sans";
  font-size:18px;
  font-style:italic;
  text-transform:none;

    }

    .post .td_quote_box p,
    .page .td_quote_box p {
        font-family:"PT Sans";
  font-size:14px;
  font-style:italic;

    }

    .post .td_pull_quote p,
    .page .td_pull_quote p {
        font-family:"PT Sans";
  font-size:22px;
  font-style:italic;

    }

    .td-post-content h1 {
        font-size:42px;
  text-transform:uppercase;

    }

    .td-post-content h2 {
        font-size:44px;
  text-transform:uppercase;

    }

    .post .td-category a {
        font-family:"PT Sans Caption";
  font-size:14px;

    }

    .post header .td-post-author-name,
    .post header .td-post-author-name a {
        font-family:"PT Sans Caption";
  font-size:16px;

    }

    .post header .td-post-date .entry-date {
        font-family:"PT Sans Caption";
  font-size:16px;

    }

    .post header .td-post-views span,
    .post header .td-post-comments {
        font-family:"PT Serif";

    }

    .post .td-post-source-tags a,
    .post .td-post-source-tags span {
        font-family:"PT Serif";

    }

    .post .td-post-next-prev-content span {
        font-family:"PT Serif";

    }

    .post .td-post-next-prev-content a {
        font-family:"PT Serif";
  text-transform:uppercase;

    }

    .post .author-box-wrap .td-author-name a {
        font-family:"PT Serif";

    }

    .post .author-box-wrap .td-author-url a {
        font-family:"PT Serif";

    }

    .post .author-box-wrap .td-author-description {
        font-family:"PT Serif";

    }

    .td_block_related_posts .entry-title a {
        font-family:"PT Serif";
  text-transform:uppercase;

    }

    .post .td-post-share-title,
    .td-comments-title-wrap h4,
    .comment-reply-title {
        font-family:"PT Serif";

    }

  .wp-caption-text,
  .wp-caption-dd {
    font-family:"PT Serif";
  font-size:13px;

  }

    .td-post-template-default .td-post-sub-title,
    .td-post-template-1 .td-post-sub-title,
    .td-post-template-5 .td-post-sub-title,
    .td-post-template-7 .td-post-sub-title,
    .td-post-template-8 .td-post-sub-title {
        font-family:"PT Serif";
  text-transform:uppercase;

    }

    .td-post-template-2 .td-post-sub-title,
    .td-post-template-3 .td-post-sub-title,
    .td-post-template-4 .td-post-sub-title,
    .td-post-template-6 .td-post-sub-title {
        font-family:"PT Serif";
  text-transform:uppercase;

    }









    .td-page-header h1,
    .woocommerce-page .page-title {
      font-family:"PT Sans Caption";
  font-size:36px;
  text-transform:uppercase;

    }

    .td-page-content p,
    .td-page-content .td_block_text_with_title,
    .woocommerce-page .page-description > p {
      font-family:"PT Sans";
  font-size:18px;

    }

    .td-page-content h1 {
      font-family:"PT Sans Caption";
  text-transform:uppercase;

    }

    .td-page-content h2 {
      text-transform:uppercase;

    }

  .footer-text-wrap {
    font-family:"PT Sans";
  font-size:15px;

  }

  .td-sub-footer-copy {
    font-family:"PT Sans Narrow";

  }

  .td-sub-footer-menu ul li a {
    font-family:"PT Sans Caption";

  }




    .td-trending-now-title {
      text-transform:uppercase;

    }

  input[type="submit"],
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce #respond input#submit {
    font-size:15px;

  }


    body, p {
      font-family:"PT Sans";
  font-size:20px;

    }




    #bbpress-forums .hentry .bbp-forum-title,
    #bbpress-forums .hentry .bbp-topic-permalink {
      text-transform:uppercase;

    }
</style>


<!-- BEGIN GADWP v4.9.3.2 Universal Tracking - https://deconf.com/google-analytics-dashboard-wordpress/ -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-75874576-1', 'auto');
  ga('send', 'pageview');
</script>

<!-- END GADWP Universal Tracking -->

<noscript><style type="text/css"> .wpb_animate_when_almost_visible { opacity: 1; }</style></noscript>    <script type="text/javascript" charset="utf-8" src="https://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>
    <script type='text/javascript'>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
  (function() {
    var gads = document.createElement('script');
    gads.async = true;
    gads.type = 'text/javascript';
    var useSSL = 'https:' == document.location.protocol;
    gads.src = (useSSL ? 'https:' : 'http:') +
      '//www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
  })();
</script>

<script type='text/javascript'>
  googletag.cmd.push(function() {
    googletag.defineSlot('/60623133/300x250', [300, 250], 'div-gpt-ad-1469477614650-0').addService(googletag.pubads());
    googletag.defineSlot('/60623133/728x90', [728, 90], 'div-gpt-ad-1463430384889-1').addService(googletag.pubads());
    googletag.defineSlot('/60623133/wallpaper', [1, 1], 'div-gpt-ad-1463430384889-2').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
  });
</script>

В цифри числа

Стилове
18 стила, 3 от които вложени
Още един вложен стил в дъното на body
Скриптове
11 елемента, 6 от които вложени
Още 6 елемента в дъното на body, 3 от тях вложени
Общо
32KB HTML само в head, 1.6MB CSS, 2MB JS

Лесните неща

Които всеки потребител на WordPress трябва да направи

Обединяване и минифициране на CSS и JS

Disable Emojis

Просто инсталирайте това разширение.

Мачкайте картинките

Елементарна хигиена при избор на тема и разширения

Трудните неща

Които никой разработчик не трябва да пропуска

Използвайте правилно HTML

<a href="#">
<a href="javascript:">
<div role="button">
<span class="clickable">
<a href="http://some.url">
<button type="button">
<a href="/some-post-or-page-or-whatever">

Използвайте HTML5


add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

https://developer.wordpress.org/reference/functions/add_theme_support/#html5

Използвайте HTML5


<input name="q" type="search" required />
<input id="email" name="email" value="" required="required" type="email">

Валидиране на форми в браузъра

Комбинирайте HTML5 и WAI-ARIA

За по-кратък и изразен код.

<header role="banner"></header>
<main></main>
<aside role="complementary"></aside>
<footer role="contentinfo"></footer>
header[role="banner"] { }
main { }
aside[role="complementary"] { }
footer[role="contentinfo"]{ }

Отзивчиви картинки

<img src="" srcset="" sizes="" alt="" />

WordPress генерира сам srcset, но вие трябва опишете sizes според дизайна на темата.

the_post_thumbnail( 'image-medium', array( 'sizes' => '(min-width: 37.5em) calc(50vw - 1.5em), (min-width: 60em) 29.5em, 100vw' ) );

Отзивчиви картинки

Използвайте add_image_size(), за да кажете на WordPress да генерира нужните ви размери картинки. 


add_image_size( string $name, int $width, int $height, bool|array $crop = false )

https://developer.wordpress.org/reference/functions/add_image_size/

Пример


// header images on big screens
add_image_size( 'header-image-huge', 1920, 453, true );
add_image_size( 'header-image-large', 1650, 390, true );
add_image_size( 'header-image-big', 1366, 323, true );
add_image_size( 'header-image-small', 1024, 242, true );

// header images on medium screens
add_image_size( 'wide-large', 1024, 391, true );
add_image_size( 'wide-big', 800, 306, true );

// post images on small screens
add_image_size( 'wide-medium', 480, 183, true );
add_image_size( 'wide-small', 360, 138, true );

// header images on small screens
add_image_size( 'square-big', 520, 320, true );
add_image_size( 'square-medium', 360, 222, true );

// post images on medium and big screens
add_image_size( 'square-small', 280, 173, true );
add_image_size( 'square-tiny', 180, 111, true );

<picture>'s worth a thousend words

Устройства с различни размери и пропорции на екрана

<picture>'s worth a thousend words

<picture>
  <source media="" src="" srcset="" type="" />
  ...
  <img src="" alt="" />
</picture>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Приложено към header_image

<?php
$header = get_custom_header();
if ( $header ) {
?>
<picture>
 <?php
 $srcset_value = wp_get_attachment_image_srcset( $header->ID, 'header-image-small' );
 $srcset = $srcset_value ? ' srcset="' . esc_attr( $srcset_value ) . '"' : '';
 ?>
 <source media="(min-width: 1024px) and (orientation: landscape)" <?php echo $srcset; ?> />
 ...
 <img src="<?php echo esc_url( wp_get_attachment_image_src( $header->ID, 'header-image-base', false )[0] ); ?>" />
</picture>
} ?>

А как да отрежем снимките?

Manual Image Crop

Не допускайте divitis и classitis

<div class="td-related-row">
  <div class="td-related-span4">
    <div class="td_module_related_posts td-animation-stack td_mod_related_posts">
      <div class="td-module-image">
        <div class="td-module-thumb">
          <a href="..." rel="bookmark" title="...">
            <img width="238" height="178" itemprop="image" class="entry-thumb" src="..." alt="" title="..."/>
          </a>
        </div>
        <a href="..." class="td-post-category">...</a>
      </div>
      <div class="item-details">
        <h3 itemprop="name" class="entry-title td-module-title">
          <a itemprop="url" href="..." rel="bookmark" title="...">...</a>
        </h3>
      </div>
    </div>
  </div>
  ...
</div>

Не допускайте divitis и classitis


<ul class="td-related-row">
  <li>
    <article itemscope itemtype="http://schema.org/Article" class="td_module_related_posts">
      <a itemprop="url" href="..." rel="bookmark">
        <img srcset="..." sizes="..." itemprop="image" src="..." alt="" />
        <header>
          <h3 itemprop="name">...</h3>
        </header>
      </a>
      <footer>
        <a href="..." class="td-post-category">...</a>
      </footer>
    </article>
  </li>
  ...
</ul>

Не допускайте divitis и classitis

<body <?php body_class(); ?>>
    ...
<article <?php post_class(); ?>>
<body class="home page page-id-9 page-parent page-template page-template-page-templates page-template-full-width page-template-page-templatesfull-width-php full-width single-author header-image-no footer-widgets page-%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80%d0%bd%d0%b0-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d0%b0" itemscope itemtype="http://schema.org/WebPage">
...
<article id="post-9" class="post-9 page type-page status-publish has-post-thumbnail hentry has-thumbnail" itemscope itemtype="http://schema.org/Article">

Изчистване на body_class и post_class


function filter_body_class( $wp_classes, $extra_classes ) {
  $whitelist = array( 'single', 'page', 'home', 'search', 'error404' );
  $wp_classes = array_intersect( $wp_classes, $whitelist );
  return array_merge( $wp_classes, (array) $extra_classes );
}
add_filter( 'body_class', 'filter_body_class', 99, 2 );

http://wordpress.stackexchange.com/questions/15850/remove-classes-from-body-class

Резултата


<body class="home page" itemscope itemtype="http://schema.org/WebPage">
...
<article class="page" itemscope itemtype="http://schema.org/Article">

Менюта

wp_nav_menu( array(
  'theme_location' => 'primary',
  'container'      => 'nav',
  'container_class'=> 'primary-nav',
  'container_id'   => '',
  'items_wrap'     => '<ul>%3$s</ul>'
) );

https://developer.wordpress.org/reference/functions/wp_nav_menu/

Изчистване на HTML-а на менютата


function filter_menu_item_classes( $classes, $item, $args ) {
  $whitelist = array( 'current-menu-item' );
  $classes = array_intersect( $classes, $whitelist );
  return $classes;
}
add_filter( 'nav_menu_css_class', 'filter_menu_item_classes', 10, 3 );

function filter_menu_item_id( $id ) {
  return '';
}
add_filter( 'nav_menu_item_id', 'filter_menu_item_id', 99 );

JavaScript-ът, без който не можем

Зареждайте асинхронно

<script src="" async defer></script>

Асинхронно зареждане с wp_enqueue_script

function add_async_attribute($tag, $handle) {
  // add script handles to the array below
  $scripts_to_defer = array('caroucel', 'lightbox');
  if ( in_array( $handle, $scripts_to_defer ) ) {
    $tag = str_replace( ' src', ' async="async" src', $tag );
  }
  return $tag;
}
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

http://matthewhorne.me/defer-async-wordpress-scripts

Асинхронно зареждане с Autoptimize

function override_defer($defer) {
  return $defer."async ";
}
add_filter( 'autoptimize_filter_js_defer', 'override_defer', 10, 1 );

Асинхронно зареждане с Better WP Minify

Май няма как, поне аз не намерих начин.

Използвайте VanillaJS

Винаги, когато това е възможно

jQuery
94K minified, 33K gzipped
Slider jQuery plugin
6 - 200K minified
VanillaJS slideshow*
3.5K unminified

* На базата на Simplest JavaScript Slideshow на Jonathan Snook и domready на Dustin Diaz

Изключете ненужните скриптове (и стилове)

function remove_scripts() {
  wp_dequeue_script( 'jquery-migrate' );
  wp_deregister_script( 'jquery-migrate' );
}
add_action( 'wp_print_scripts', 'remove_scripts' );

http://wordpress.stackexchange.com/questions/189985/how-to-properly-dequeue-scripts-and-styles-in-child-theme

Вашите коментари?