Бложег

Ура! Новый дизайн!

Опубликовано: 23.03.2018 в 01:56

Автор:

Категории: Тык

Добрались наконец руки и почти обновил дизайн своего блога по разным фишкам, а то использовать бесплатный шаблон не комильфо, всё равно что сапожник будет ходить в чужих сапогах =)

AMP страницы и с чем его едят ?

Опубликовано: 21.03.2018 в 21:17

Автор:

Категории: Верстка,Оптимизация

Как-то мимо меня прошла волна оптимизации страниц для гугла, а потом как-то человек который занимается SEO продвижением дал мне ссылку на турбостраницу от яндекса, ну я подумал обычный конструктор и забыл.
Потом неожиданно удивился как же быстро грузятся страницы лайфхакера, погуглив – немедленно решил сделать и для себя такую фичу, выкладываю примерный шаблон amp страницы, он пригодиться каким нибудь легким страницам типа моего основого сайта, или где нету возможности просто поставить плагин


<!doctype html>
<html amp lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Я заголовок</title>
    <link rel="canonical" href="https://truesites.ru/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
<!-- Я микроразметка, я необязательна, но я улучшаю позиции в поисковиках -->
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
	</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
	</style></noscript>
<style amp-custom>
<!-- Я стили -->
  
	</style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
  
	<amp-img src="ya.png" alt="Я картинка" height="100" width="100"></amp-img>

  </body>
</html>

Подробности можно почитать тут

Bootstrap Modals + slick slider fix height

Опубликовано: 21.03.2018 в 17:01

Автор:

Категории: JQ

Была проблема – некорректно работал слайдер внутри бустрап окна, в интернете очень много вариантов решения проблемы, но не один из них толком не работает, выкладываю сто процентов рабочий вариант

$('.modal').on('shown.bs.modal', function (e) {
$('.slick-slider').slick('setPosition');
})

В поисках оптимизации wordpress (не работает переключение между редакторами)

Опубликовано: 19.03.2018 в 22:31

Автор:

Категории: Wordpress

Попался мне заказ по оптимизации wordpress, чо там говорит PageSpeed ? Ага.

  • Ставим Compress JPEG & PNG images от png панды и оптимизируем картинки
  • Собираем js скрипты в 1 фаил
  • Минимизируем css/js

Всё еще ругается…

Удалите код JavaScript, блокирующий отображение верхней части страницы

Количество блокирующих скриптов на странице: 2. Они замедляют отображение контента.

Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.

Удалите код JavaScript, препятствующий отображению:

Google советует добавить async для родных скриптов wordpress, ну идем значит /wp-includes/class.wp-scripts.php ищем строку

$tag = "{$cond_before}{$before_handle}<script type='text/javascript' src='$src'></script>\n{$after_handle}{$cond_after}";

добавляем наш излюбленный async, радуемся первые пол часа, пока в админке не отваливается переключение между визуальным и html редактором

Плюём на гугл PageSpeed, возвращаем как было и идем заваривать себе чаю с печеньками

Табы записей Bootstrap

Опубликовано: 19.03.2018 в 22:17

Автор:

Категории: Wordpress

Понадобилось мне тут сделать табы записей на бустрапе, сделал на скорую руку, поэтому имеем 2 запроса, знаю что можно было обойтись одним, ну да ладно, кто станет пихать миллион табов ?

Регистрируем тип записи (в моём случае)

register_post_type( 'reviews', array(
'label' => 'Услуги',
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => true,
'supports' => array( 'title' )
) );

И выводим табы

<ul id="myTab" class="col-lg-3 col-md-4 nav nav-tabs">
<?php
global $post; 
$args = array('post_type' => 'service'); 
$custom_posts = get_posts($args);
foreach($custom_posts as $post) : setup_postdata($post); ?>
  <li><a href="#<?php echo get_the_ID(); ?>"><?php the_title(); ?></a></li>
  <?php endforeach;
wp_reset_postdata(); ?>
</ul>
 
<div class="tab-content col-lg-9 col-md-8">
  <?php
global $post; 
$args = array('post_type' => 'service'); 
$custom_posts = get_posts($args);
foreach($custom_posts as $post) : setup_postdata($post); ?>
  <div id="<?php echo get_the_ID(); ?>" class="tab-pane fade">
    <p> <?php the_field('описание_услуги'); ?></p>
  </div>
  	  <?php endforeach;
wp_reset_postdata(); ?>
</div>

А еще не забываем добавить active классы нашим табам

<script>
	(function($) {
		$(".nav-tabs li:first").addClass("active");
		$(".tab-content .tab-pane:first").addClass("in active");
		
	})(jQuery);
</script>

Контент записи в bootstrap окне (без json)

Опубликовано: 16.03.2018 в 22:58

Автор:

Категории: Wordpress

Ковырял тут огромный ленд, была задача – организовать контент в бустрап окне, на странице было всего 3 записи, поэтому обошелся без json, чуть попозже сделаем на нём, дабы сэкономить кучу кода

<?php
global $post;
$args = array('post_type' => 'price_hous'); 
$custom_posts = get_posts($args);
foreach($custom_posts as $post) : setup_postdata($post);
?>
 
 
       	<li>
      		<div class="item">
	      		<h3><? the_title(); ?></h3>
	      		<a class="btn open-popup" data-toggle="modal" data-target="#<?php echo get_the_ID() ?>">Подробнее</a>
	      	</div>
<div class="modal fade" id="<?php echo get_the_ID() ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel"><? the_title(); ?></h4>
      </div>
      <div class="modal-body">
        Содержимое модального окна...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>  
      	</li>
		

 
<?php
endforeach;
wp_reset_postdata(); 
?>

Внимание! Вы можете повторить тот же эффект с любым окном, но этот способ не подходит если на странице много записей, в исходном коде будет много кода

$(document).ready работает неправильно

Опубликовано: 13.03.2018 в 16:58

Автор:

Категории: JQ,Верстка

Был у меня код который прорисовывает высоту и прочие css свойства дива в зависимости от картинки, но вот беда – при первом посещении не работал код, при повторном посещении – все замечательно, залил на codepen о чудо, работает однако, но на боевом сайте – хренушки.

$(document).ready(function(){
  resize();
});

Где здесь ошибка ?

А ошибка в том что ‘$(document).ready’ будет выполняться как будет готов DOM, за исключением картинок.
Переписываем на

$(window).load(function() {
  resize();
});

PROFIT!

Банальный .htaccess

Опубликовано: 09.03.2018 в 01:04

Автор:

Категории: Wordpress

В своих работах я ложу обычно этот .htaccess который отвечает за сжатие файлов, а что еще надо ?

AddDefaultCharset UTF-8
<ifModule mod_expires.c>

# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ExpiresActive On
ExpiresDefault "access plus 5 seconds"

# Cache Images
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/svg+xml "access plus 2592000 seconds"

# Cache Fonts
ExpiresByType application/vnd.ms-fontobject "access plus 2592000 seconds"
ExpiresByType application/x-font-ttf "access plus 2592000 seconds"
ExpiresByType application/x-font-opentype "access plus 2592000 seconds"
ExpiresByType application/x-font-woff "access plus 2592000 seconds"
ExpiresByType image/svg+xml "access plus 2592000 seconds"

# Cache other content types (Flash, CSS, JS, HTML, XML)
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"

</ifModule>

<ifModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

</ifModule>

Всплывающее окно (закрытие по свайпу)

Опубликовано: 09.03.2018 в 00:41

Автор:

Категории: Верстка

С таким запросом я пошел в гугл…очень долго искал пока не наткнулся на сие чудо

Оно умеет закрываться по свайпу, и это очень круто, особенно поймут пользователи ios

Чтобы отредактировать анимацию закрытия – редактируем строки ниже

.fancybox-fx-slide.fancybox-slide--previous {
	transform: translate3d(-100%, 0, 0);
	opacity: 0;
}

.fancybox-fx-slide.fancybox-slide--next {
	transform: translate3d(100%, 0, 0);
	opacity: 0;
}

.fancybox-fx-slide.fancybox-slide--current {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}