Дима Рашпиль

… и ошибка Xdebug

Решение →

Нашел на GitHub простое REST api для сайта на php. Решил развернуть, попробовать.
Надо сначала установить Composer. Хотелось побыстрей начать, поэтому даже не думал, скачал инсталлятор с оф. сайта, запустил… ошибка (

Ну думаю ладно, сейчас погуглю и быстро приступлю к проекту. Забиваю в Гугл Composer install [Step Debug] Time-out connecting to debugging client, waited: 200 ms. Tried: localhost:9003 (through xdebug.client_host/xdebug.client_port) 🙁

Сразу выдаёт ответ на stackoverflow, думаю отлично, иду читать. Один ответ, второй, третий…ссылка, ещё ссылка, 5, 10. Документация Composer, документация Xdebug…, ответы вроде есть, но ничего не помогает.

Ну собственно, последовательность примерна такая. Инсталлятор выдаёт ошибку из-за Xdebug, смотрим его. Проверяем настройки. Увеличиваю время, не помогает. Мелькает какой-то ответ про логи PHP. Начинаю смотреть настройки логов. Настройки все как надо.
Проверяю куда PHP записывает ошибки. В настройках XAMPP\php\logs\php_error_log Папки logs нет, файла тоже нет.

Начинаю опять гуглить. Может xampp где-то в другом месте ошибки пишет. Нет.
И тут натыкаюсь на ответ, на каком-то форуме. Типо, PHP сам создаст папку, файл и запишем ошибки. Оно то логично, но файла нет и может проблема в этом?

Решение:
Создаю новый файл index.php пишу echo $a, а саму переменную не объявляю.

<?php

echo $a;

Открываю файл в браузере и опа на, PHP создал файл лог!
Возвращаюсь в инсталлятор, нажимаю вперёд и все готово!

Как так?!

Два с половиной часа я шарился по ссылкам в поисках ответа, читал документацию, проверял все настройки в php.ini искал ошибку, а проблема была в отсутствии ошибок)

Вчера меня попросили записать видео и показать как развернуть WordPress.
Вот само видео…

Что я сделал:

Создал базу данных MySQL Тут все просто. Ищем в панели управления хостингом вкладку базы данных и создаём новую. Нас интересует Имя БД, Имя пользователя БД, Пароль. Как правило, остальные параметры можно не трогать.

Скачиваем архив самого WordPress с официального сайта
Загружаем архив на хостинг.
Распаковываем и при необходимости перемещаем файлы в корень сайта. Должно выглядеть примерно так: вашсайт.ру/файлы.
Можно попробовать оставить как есть, типо: вашсайт.ру/wordpress-5.6/wordpress/файлы. Но лучше сразу переместить, чтобы потом не пришлось мучительно долго искать откуда же появилась та или иная проблема.

Дальше заходим по адресу нашего сайта, вида вашсайт.ру/ и попадаем в установщик WordPress. Вводим данные нашей базы данных — Имя БД, Имя пользователя БД, Пароль. Ещё нас просят указать адрес где находится БД. Чаще всего, оставляем как есть — localhost. Если не заработает, ищите инфу там же, где создавали базу.

WordPress проверяет подключение к БД и если всё указали верно, просто нажимаем дальше.

Последний шаг, регистрация администратора сайта. Вводим логин, пароль, почту. Естественно, лучше придумать что-то более сложное, чем логин admin, пароль admin111

Все! Сайт готов.

P.s. Для входа в консоль управления WordPress, введите в адресной строке вашсайт.ру/wp-admin

Пока я изучаю как делать блоки для редактора Gutenberg, я нашёл костыль.

Мне надо было добавить слайдер. Тыкал, тыкал, разбирался в примерах кода, но сделать полноценный блок для современного редактора WordPress так и не получилось.

Слайдер нужен и нужна возможность легко менять изображения через админку. Вариант писать html блок сразу отпал. Можно было сделать через ACF, но не хотелось. И я с ним не сказать, что хорошо знаком, и всё-таки уже это догонять вчерашний день.

Нашёл простой и рабочий вариант. В чём-то даже удобнее полноценного блока.

Создал блок с вложением. Единственное что он умеет, это принимать в себя другие блоки и выступать обёрткой. Как стандартный блок «группа».

Теперь по порядку, что я сделал:

Скачал пример блока Gutenberg examples inner-blocks

Скачал slick slider

А теперь берем и переделываем блок из примера.

Регистрация блока в index.php

function rspl_example_slider_register_block() { // регистрируем блок

 if ( ! function_exists( 'register_block_type' ) ) {
  // Slider is not active.
   return;
 }

  wp_register_script(
   'rspl-example-slider',
   plugins_url( 'block.js', __FILE__ ),
   [ 'wp-blocks', 'wp-element', 'wp-block-editor' ],
   filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ),
   true
 );

 register_block_type(
  'rspl-example/slider',
  [
   'editor_script' => 'rspl-example-slider',
  ]
 );

} // конец регистрации блока
add_action( 'init', 'rspl_example_slider_register_block' );

Регистрация блока в block.js

( function( blocks, element, blockEditor ) {
	var el = element.createElement;
	var InnerBlocks = blockEditor.InnerBlocks;
	blocks.registerBlockType( 'rspl-example/slider', {
		// blocks.registerBlockType( 'gutenberg-examples/example-07', {
		title: 'Example: Slider',
		category: 'layout',
		edit: function( props ) {
			return el(
				'div',
				{ className: props.className },
				el( InnerBlocks )
			);
		},
		save: function( props ) {
			return el(
				'div',
				{ className: props.className },
				el( InnerBlocks.Content )
			);
		},
	} );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );

На этом этапе наш блок уже доступен в редакторе

Регистрируем и подключаем скрипт слайдера slick.js который скачали, указав зависимость от jquery

function rspl_example_slider_frontend_scripts() { // подключаем скрипты и стили

   wp_enqueue_script(
      'rspl-example-slick-script',
      plugins_url( '/assets/js/slick.js', __FILE__ ),
      [ 'jquery' ], // ставим зависимость от jquery 
      filemtime( plugin_dir_path( __FILE__ ) . '/assets/js/slick.js' ),
      true
   );

} // конец функции "подключаем скрипты и стили"
add_action( 'wp_enqueue_scripts', 'rspl_example_slider_frontend_scripts' );

Регистрируем и подключаем скрипт slider.js в котором настройки слайдера и подключение к slick.js Указываем зависимость от jquery и slick

function rspl_example_slider_frontend_scripts() { // подключаем скрипты и стили

 // Подключенный ранее 'rspl-example-slick-script'

   wp_enqueue_script(
      'rspl-example-slider-script',
      plugins_url( '/assets/js/slider.js', __FILE__ ),
      [ 'jquery', 'rspl-example-slick-script' ],
 // зависимость от jquery и slick
      filemtime( plugin_dir_path( __FILE__ ) . '/assets/js/slider.js' ),
      true
   );

} // конец функции "подключаем скрипты и стили"
add_action( 'wp_enqueue_scripts', 'rspl_example_slider_frontend_scripts' );

А вот и сам slider.js в котором подключение и параметры слайдера.

jQuery(document).ready(function(){
  jQuery('.wp-block-rspl-example-slider').slick({
     dots: true,
     autoplay: true,
     autoplaySpeed: 2000,
     pauseOnHover: true,
     pauseOnDotsHover: true,
   });
 });

Здесь же подключаем style.css со стилями нашего нового блока-слайдера.

function rspl_example_slider_frontend_scripts() { // подключаем скрипты и стили

  // Подключенный ранее 'rspl-example-slider-script',
  // Подключенный ранее'rspl-example-slick-script',
  
   wp_enqueue_style(
      'rspl-example-slider-style',
      plugins_url( '/assets/css/style.css', __FILE__ ),
      array( ),
      filemtime( plugin_dir_path( __FILE__ ) . '/assets/css/style.css' )
   );
      
} // конец функции "подключаем скрипты и стили"
add_action( 'wp_enqueue_scripts', 'rspl_example_slider_frontend_scripts' );

Все работает, Отлично. Теперь, если на странице есть блок с нашим классом, подключаются скрипты и стили, и содержимое выводится слайдером. А раз мы знаем такую информацию, можно ей воспользоваться.

Добавим условие, чтобы скрипты и стили не грузились на сайте все время, а только там где используется блок-слайдер

if ( has_block( 'rspl-example/slider' ) ) { // если есть блок, подключаем скрипты и стили
      
 // Подключенный ранее - 'rspl-example-slider-script',
 // Подключенный ранее - 'rspl-example-slick-script',
 // Подключенный ранее - 'rspl-example-slider-style'

} // конец if если есть блок

Заодно решил немного сократить код и объединил js файлы (не уверен, что так можно, но оно работает). Просто скопировал то, что в slider.js и поместил в конец slick.js

Полный вариант index.php с подключением слайдера

function rspl_example_slider_register_block() { // регистрируем блок

 if ( ! function_exists( 'register_block_type' ) ) {
  // Slider is not active.
  return;
 }

 wp_register_script(
  'rspl-example-slider',
   plugins_url( 'block.js', __FILE__ ),
   [ 'wp-blocks', 'wp-element', 'wp-block-editor' ],
   filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ),
   true
  );

  register_block_type(
   'rspl-example/slider',
   [
   'editor_script' => 'rspl-example-slider',
   ]
  );
} // конец регистрации блока
add_action( 'init', 'rspl_example_slider_register_block' );

function rspl_example_slider_frontend_scripts() { // подключаем скрипты и стили

  if ( has_block( 'rspl-example/slider' ) ) { // если есть блок, подключаем скрипты и стили
		
  wp_enqueue_script(
   'rspl-example-slick-script',
   plugins_url( '/assets/js/slick.js', __FILE__ ),
   [ 'jquery' ], // ставим зависимость от jquery 
   filemtime( plugin_dir_path( __FILE__ ) . '/assets/js/slick.js' ),
   true
   );
	
  wp_enqueue_style(
   'rspl-example-slider-style',
   plugins_url( '/assets/css/style.css', __FILE__ ),
   array( ),
   filemtime( plugin_dir_path( __FILE__ ) . '/assets/css/style.css' )
  );
 } // конец if если есть блок
} // конец функции "подключаем скрипты и стили"
add_action( 'wp_enqueue_scripts', 'rspl_example_slider_frontend_scripts' );

Заметил такой момент. Стили темы перебивают стили кнопок-стрелок на слайдере. Когда стрелка в фокусе, :hover темы добавлял фон, поэтому повышаем специфичность в стилях.

Думаю добавлять код самого slick slider и стилей нет смысла. Хотя если надо, в варианте плагина, слайдер можно скачать по ссылке на GitHub

Да. Может это не самый оптимальный вариант и кастомизируется только кодом. Но он работает и поменять контент сможет любой пользователь.

Как говориться, вопросы, пожелания, критика, все в комменты.

Вчера целый день возился с меню.

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

Естественно, ничего у меня не получалось. То верхний уровень поедет, то вложенные элементы куда-то съедут, то адаптив совсем не адаптивным становится.

Промучившись часов 6, понял, пора бросить. Ну не идёт и всё.

Пока я пил чай, понял, что проблема в самом подходе, я снова пытаюсь сделать все сразу.
Ну думаю ладно, пойдём постепенно.

Поставил меню только верхнего уровня. Через 6 минут десктопная версия готова. Ещё через 10, мобильная. После нескольких часов мучений, я даже не поверил.

В голове такая мысль, Что и все? А чем я занимался целый день?

Примерно за час я закончил прописывать стили меню… и тут я засомневался в изначальном дизайне))

Сегодня хочу поговорить про контент. С одной стороны, это очевидно, что контент решает. А с другой, когда я разговариваю с клиентами, у многих возникают вопрос, что конкретно я имею в виду.

Как вы уже поняли из название, я собираюсь писать не про весь контент, а конкретно про изображения (фотографии, иллюстрации, графику).

В зависимости от того, на что делаются акценты, от изображения может зависеть 10-20% восприятия сайта или все 100%.

Возьмем для примера такой дизайн сайта:

Много воздуха, как сейчас принято говорить, white space. Минимализм и неброские элементы меню, которые сочетаются с эскизом. Собственно этот дизайн и задумывался в первую очередь для использования эскизов карандашом.

Теперь поменяем изображение:

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

Снова поменяем изображения:

Это изображение значительно перетягивает внимание. На самой фотографии отсутствует окончание крыши. Но мой взгляд, такое сочетание совсем нельзя назвать «хорошим».

И снова поменяем изображения:

А это изображение, как говорится «из реальной жизни».

Такое изображения можно использовать, на странице с реализованными проектами или странице отзывов. Но! Использовать такое фото с такими элементами меню… ну вы сами видите)))

Это достаточно простые примеры. Если мы поменяем фон на цветной, то изображение ещё сильнее начинает «резать» пространство своими границами.

С одной стороны у нас появляется новый инструмент дизайна. С другой стороны, просто поменяв изображение, можно все испортить намного сильнее.

Дизайн сайтов бывает совершенно разным, как и целевые аудитории, для которых сайты создаются. Если говорить о примерах выше, то для определенной целевой группы, самое понятное изображение последнее. Но и дизайн сайта надо делать ориентируясь на то, что использоваться будут реальные фотографии домов, сделанные не профессиональными фотографами.

Вместо выводов:

Можно ли сделать универсальный дизайн?

Можно. Будет выглядишь неплохо почти с любым изображением. Но и выглядеть хорошо, он не будет почти никогда))

Предполагалось, что этот сайт будет посвящён психологии и мне как психологу.

Что я буду писать про психологию, объяснять какие-то понятия и все в этом духе. Собственно, так я и делал, пока не решил сменить дизайн.

Перечитывая свои статьи, я понял, что они мне совсем немного не нравились. Я решил все снести, поменять дизайн и написать статьи заново. Но, как говорится, все пошло не так!

Смена дизайна потянула за собой желание поэкспериментировать и я сильно увлёкся программированием.

Как показывает опыт наблюдения, люди хорошо рассказывают о том, что для них актуально, за исключением мемуаров, но до этого я ещё не дошёл. Поэтому, писать про психологию мне стало совсем не актуально. Не то чтобы нечего, просто голова занята совсем другими вещами и гораздо проще написать про то, что я узнал в программировании, чем про пси!

Ну и конечно, куда же без неё, короны, которая тоже подкидывает совсем другие размышления. Хотя вернее будет сказать, даёт определённый вектор этим размышлениям.

Так что планы немного поменялись и писать я будут том, что актуально.
Кому про психологию, кому про программирование, а кому про машины.

С учётом того, что первые статьи на обновлённом сайте я хотел написать про мультипотенциальность, мой собственный разброс тем уже не выглядит чем-то странным, а скорее даже наоборот. Ведь в этом и заключается суть мультипотенциалов, что они занимаются совершенно разными вещами.

Надеюсь, следующий пост я напишу достаточно быстро.
Мыслей, которыми хочется поделится и тем, о которых хочется рассказать много, а времени, наполненного креативным состоянием и возможностью, гораздо меньше.

Вэлкоме!