Ответы пользователя по тегу HTML
  • Как исправить перекрытие текста картинкой?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Здравствуйте. Добавьте текстовому блоку position: relative; и z-index: 10;
    должно помочь
    Ответ написан
  • Как сверстать такой блок?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    не универсальный способ, но может сработать:
    1) Для секции внутри которой находится container задайте фон, который наполовину синий, наполовину белый.
    2) Внутри контейнера задайте синий и белый фон для соответствующих колонок

    В итоге фон от колонок будет перекрывать фон секции внутри контейнера, а по краям будут правильные цвета
    Ответ написан
    1 комментарий
  • Как сделать одинаковые отступы которые независимы от контента?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Лучше всего сделать через флекс-бокс:

    .news__content {
      display: flex;
      flex-direction: column;
    }  
    
    .news__cards-title {
      flex-grow: 1;
    }

    В этом случае заголовок будет растягиваться по высоте, а текст будет прижат к низу. Работать будет при условии, что количества контента по высоте меньше чем высота карточки.
    Ответ написан
  • Не меняется разрешение картинки в background-image?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Здравствуйте, у вас высота дива 100% судя по инспектору, а не 36% как вы написали выше.
    Я не до конца понял суть вопроса, поэтому напишу несколько "советов", может быть что-то из этого сработает

    1) Для задания высоты блока используйте единицы vw или vh вместо процентов. С помощью vw можно получить div нужных пропорций, а с помощью vh управлять высотой блока относительно высоты окна браузера.

    2) Используйте для заданий масштаба фона значения cover или contain. Background-size: cover растянется так, чтобы занять всю высоту и ширину элемента, при этом края обрежутся. Background-size: contain покажет фоновую картинку целиком, при любых пропорциях элемента, но будут пустые поля.
    Ответ написан
    Комментировать
  • Откуда отступ сверху у body?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Здравствуйте. Скорее всего это верхний марджин у первого вложенного элемента
    Ответ написан
    Комментировать
  • Как создать выезжающий блок, занимающий пространство?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Если у блоков один родитель, то задача отлично решается flexbox'ом.
    Пример подобной реализации https://codepen.io/solidcreature/pen/mdEZbNr
    Ответ написан
    Комментировать
  • Как вывести html-сраницу с динамическими данными?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Добрый день. Чтобы верстка не ехала при масштабировании -- замените все размеры: ширину, высоту, отступы на % или vw (единицы vieport width). Получите резиновую верстку. Вариант не идеальный, но вполне рабочий.

    Для удобства пересчета в проценты можно использовать Фотошоп:
    • Создайте документ, соответствующий вашему разрешению и скомпонуйте объекты
    • Включите линейки (ctrl + R)
    • Переключите единицы измерения на Проценты (для этого кликнете по линейке правой кнопкой мышки)
    • Включите панель Info, чтобы видеть актуальные размеры
    Ответ написан
    Комментировать
  • Смена логотипа при скролле, как реализовать?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Если логотипы находятся внутри div, к которому добавляется класс scrolled, то можно решить все цссом, если нет, тогда надо добавить в скрипт добавление класса scrolled для обертки логотипов

    А CSS для смены логотипов при добавлении класса scrolled такой:

    .logo-1 {
      display: block;
    }
    
    .logo-2 {
      display: none;
    }
    
    .scrolled .logo-1 {
      display: none;
    }
    
    .scrolled .logo-2 {
      display: block;
    }
    Ответ написан
    1 комментарий
  • Где найти WYSIWYG HTML редактор со слоями и абсолютным позиционированием?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Посмотрите в сторону Тильды с ее Zero Block. В плане визуального редактирования ничего удобнее пока не придумали. Но есть минусы в плане недешевой подписки и ограничений лицензионных на экспорт.

    Второй вариант WebFlow (webflow.io) довольно мощная штука. Есть бесплатная версия (без экспорта). В целом подписка еще дороже чем Тильда, но нет заморочек с экспортом.
    Ответ написан
    Комментировать
  • Как перевести свою тему на полное управление через админ панель Wordpress?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Евгений, если вы в Москве -- приходите 15 ноября на WP Moscow #4 (встречу WordPress-разработчиков в Москве), один из докладчиков как раз выступит на интересующую вас тему: https://vk.com/wall-167969562_67

    Участие бесплатное
    Ответ написан
    Комментировать
  • Как в Wordpress вывести список страниц с дополнительным полем вместо названия страницы?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Код представленный ниже нужно вставить в functions.php вашей темы. Это функция, которая добавляет шорткод [cities], который вы можете поставить там где нужно. У шорткода есть два атрибута parent, чтобы указать ID родительской страницы и key - чтобы можно было вывести не только town_name, но и любое другое поле

    Вариант применения: [cities parent=123]

    // Add Cities Shortcode
    function cities_shortcode( $atts ) {
    
    // Список возможных параметров шорткода: родительская страница и имя поля, значение которого нужно вывести
    	$atts = shortcode_atts(
    		array(
    			'parent' => '',
    			'key' => 'town_name'
    		),
    		$atts
    	);
    
    	// Задаем параметры WP_Query, чтобы получить список всех нужных страниц в одном объекте
    	$args = array(
    	  'post_type'              => array( 'page' ),
    	  'post_status'            => array( 'publish' ),
    	  'post_parent' => $atts[parent]	
    	);
    
    	//Объект WP_Query	
    	$page_query = new WP_Query( $args );
    	
    	//Обертка для всех элементов, которые получатся, можно вставить свои классы
    	$result_start = '<ul class="cities-list">';
    	$result_end = '</ul>';
    	
    	//Цикл, выводим все города
      	while ( $page_query->have_posts() ):
        	$page_query->the_post();
    		$post_id = get_the_ID(); //ID Страницы
    		$city_name = get_post_meta( $post_id, $atts[key], true ); //Название города
    		$result = $result  . '<li class="cities-item"><a href="' . get_the_permalink() . '">' . $city_name . '</a></li>'; //Название города, ссылка, + обертка из <li>
      	endwhile;		
    	
    	wp_reset_postdata();	
    	
    	return $result_start . $result . $result_end;
    }
    
    add_shortcode( 'cities', 'cities_shortcode' );
    Ответ написан
    5 комментариев
  • Как правильно подгрузить свои стили и js в уже в готовый шаблон wordpress?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Коллеги выше все правильно написали, на всякий случай попробую эту же информацию подать развернуто.

    1. Техника безопасности. Перед началом редактирования сайта -- сделайте полный бэкап, например с помощью WP All in One Migration, чтобы в случае чего полностью откатиться назад.

    2. Если ваш сайт работает на основе готовой темы — имеет смысл перед доработкой / внесением изменений (создание страницы с отдельным шаблоном — это именно оно) создать дочернюю тему. Это позволит а) разделить ваши доработки и то что было до вас б) при обновлении темы изменения не исчезнут в) всегда можно отключить дочернюю тему, если что-то сломали
    Плагин для создания дочерних тем: https://wordpress.org/plugins/orbisius-child-theme...

    3. После того как вы создали дочернюю тему. Вам нужно создать новый файл шаблона. Например page-main.php (название файла, в целом, не важно). И главное в этом файле в первой строчке написать <?php //Template Name: Название вашего шаблона ?>. В этом случае файл будет восприниматься как шаблон страницы и в интерфейсе редактирования страницы у вас появится возможность выбрать этот шаблон

    4-А. Если ваш дизайн никак не бьется с основным дизайном сайта, можно в файле page-main.php после первой строчки просто вставить целиком верстку.

    4-Б. Если на вашей странице шапка и подвал такие же как на сайте, тогда ваш файл будет выглядеть так

    <?php //Template Name:  Название вашего шаблона ?>
    <?php get_header(); ?>
    
    Здесь может идти любая ваша верстка
    
    <?php get_footer(); ?>


    Для правильной установки ваших скриптов и стилей -- скопируйте их в папку с темой и подключите их, прописав в файле functions.php вашей дочерней темы как это описано у Евгения выше

    5. Создайте страницу в интерфейсей WordPress и выберите для нее созданный шаблон. Посмотрите, если результат правильный -- назначьте эту страницу главной
    Ответ написан
    Комментировать
  • Статический сайт и динамический блог? легкие динамический страницы?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Скорость загрузки это проблема «обвеса» в виде тем и плагинов, а не самого WordPress.

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

    Посмотрите на стартовую тему _Tk. Установив тему вы получите все преимущества как WordPress так и Bootstrap

    • Сетка, компоненты и модули Bootstrap уже установлены на сайте
    • У вас уже созданы отдельные файлы под Шапку, подвал, запись блога, страницу, архивы и т.д.
    • Для меню, виджетов, наполения страниц и много другого уже есть админка
    • Вы можете воспользоваться плагинами кеширования для ускорения загрузки сайта
    Ответ написан
    Комментировать
  • Как предотвратить "ломание" страницы при изменении ее ширины в Bootstrap 4?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Общий ответ: использование Media Queries, т.е. в CSS вы прописываете отдельные правила для конкретного размера экрана. Например можно сделать текст логотипа поменьше, убрать или сузить строку поиска и т.д. для промежуточных разрешений, например c 768 до 1200 пикселей.

    Выглядеть будет примерно так:

    @media (min-width: 768px) and (max-width: 1200px) {
    .logo {
     font-size: 14px
    }
    
    .search-bar {
     display: none
    }
    }


    Данный пример условный, он лишь показывает направление мысли. Это вполне частая, что приходится манипулировать с элементами, если у вас кастомный дизайн, а не набор бутстраповских блоков.
    Ответ написан
    1 комментарий
  • Как переделать header и footer под wordpress?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Не очень понятно что такое "пустая тема", но попробую ответить. За шапку и подвал отвечают файлы header.php и footer.php соответственно. Вы можете создать файлы с такими названиями внутри папки с темой и вставить свою вёрстку туда.
    Чтобы шапка и подвал стали "родными" для WordPress вам нужно будет прописать ключевые функции, добавив
    строчку <?php wp_head(); ?> в шапку перед закрывающим тегом /head и строчку <?php wp_footer(); ?> в файл подвала перед строчкой закрывающим тегом /bоdy
    Также полезно строчку с тегом bоdy заменить на bоdy <?php body_class(); ?>

    Для того, чтобы в Шапке была навигация контролируемая через интерфейс Вордпресса нужно сделать 3 вещи:
    1) Зарегистрировать меню в файле functions.php c помощью функции register_nav_menu()
    2) Наполнить это меню с помощью интерфейса админ-панели в разделе Внешний вид > Меню
    3) Подключить это меню в шапке сайта с помощью функции wp_nav_menu()
    Ответ написан
    Комментировать
  • Какой есть плагин WP для галереи который удовлетворяет определенным параметрам?

    solidcreature
    @solidcreature
    Развиваю сообщество WordPress в Москве
    Здравствуйте. Порекомендую Advanced Custom Fields, там есть поле Галерея https://www.advancedcustomfields.com/resources/gal... Т.е. при правильной настройке у вас появится отдельное поле, где вы сможете управлять картинками.

    Важно: для вывода галереи на фронт-енд понадобится доработать шаблон темы и добавив немного php и js. Цикл php довольно простой, есть примеры в документации, а js зависит от задач, можно подключить конкретную библиотеку или воспользоваться плагином.
    Ответ написан
    Комментировать