Месяц: Апрель 2022

Для одного из проектов нужно было сделать аккордеон, решил показать в блоге, как его делать. Делаем аккордеон в блоке FAQ, поэтому там будут классы и стили со словом faq.

В вёрстке блок выглядит вот так. При клике должен показываться текст и иконка меняется с плюса на минус.

Логика

При клике на заголовок элемента, мы ищем его родителя и добавляем ему класс is-active. В то же время удаляем такой класс у остальных элементов. Изначально контект и одна иконка скрыта. В стилях для блока с активным класом меняем отображения внутренних элементов.

Разметка

Сначала нам нужна разметка. В списке всего один элемент. Чтобы не

<div class="faqs-list">
  <div class="faq faq-item">
    <div class="faq-header"> 
      <div class="faq-icon">
        <img class="faq-icon-minus" src="./img/svg/faq-icon-minus.svg" alt="">
        <img class="faq-icon-plus" src="./img/svg/faq-icon-plus.svg" alt="">
       </div>
      <div class="faq-title">Заголовок элемента</div>
    </div>
    <div class="faq-text">Текст элемента</div>
  </div>
</div>

В разметке мы должны дать дополнительный класс с приставкой .js, чтобы обращаться к нему из jQuery/Javascript. Дополнительный классы нужен, чтобы другой разработчик его не трогал. Чтобы понимал, что он не для стилей, а для интерактивности.

Нам нужно будет добавить 2 класса:

• для шапки — js-faq-header,
• для элемента — js-faq

Проставил классы в той же разметке. Выделил их жирным.

<div class="faqs-list">
  <div class="faq faq-item js-faq">
    <div class="faq-header js-faq-trigger"> 
      <div class="faq-icon">
        <img class="faq-icon-minus" src="./img/svg/faq-icon-minus.svg" alt="">
        <img class="faq-icon-plus" src="./img/svg/faq-icon-plus.svg" alt="">
       </div>
      <div class="faq-title">Заголовок элемента</div>
    </div>
    <div class="faq-text">Текст элемента</div>
  </div>
</div>

Стили

/* Стили по-умолчанию*/
.faq-icon-minus {
  display: none;
}
.faq-text {
  display: none;
}

/* Показываем текст */
.faq.is-active .faq-text {
  display: block;
}

/* Меняем иконку */
.faq.is-active .faq-icon-minus {
  display: block;
}
.faq.is-active .faq-icon-plus {
  display: none;
}

Логика

При клике на faq-header, мы ищем его родителя faq и добавляем ему класс is-active. А у всех остальных удаляем.

JavaScript

// Перебираем каждый элемент шапки
document.querySelectorAll('.js-faq-trigger').forEach(function(trigger) {
    // Получаем родителя, элемент аккордеона
    var parent = trigger.closest('.js-faq');
    
    // клик по шапке
    trigger.addEventListener('click', function(e) {
        
        // если при клике у него уже есть активный класс 
        if (parent.classList.contains('is-active')) {
            // то мы его удаляем
            parent.classList.remove('is-active');
        } 
        // если при клике мы не нашли у элемента активный класс
        else {
            // удаляем у всех элементов активный класс
            document.querySelectorAll('.js-faq').forEach(function(item) {
                item.classList.remove('is-active');
            });            
            // добавляем класс тому элементу, по которому кликнули
            parent.classList.add('is-active');
        }
    })
});

jQuery

// клик по шапке
$('.js-faq-trigger').on('click',function() {
   
    // Получаем родителя, элемент аккордеона
    var parent = $(this).closest('.js-faq');

    // если при клике мы не нашли у элемента активный класс
    if (parent.hasClass('is-active')) {
        // то мы его удаляем
        parent.removeClass('is-active'); 
    }
    else {
        // удаляем у всех элементов активный класс
        $('.js-faq').removeClass('is-active');
        
        // добавляем класс тому элементу, по которому кликнули
        parent.addClass('is-active');  
    }
})

Демо работы

Мне поступила задача перенести сайт на wordpress. Дали архив с файлами wordpress и базу.

Я этого давно не делал и у меня не получалось. Я попросил знакомого и он помог мне в некоторых тонкостях.

Делюсь с вами, потому что я перерыл много статей, но не смог найти

Загрузить файлы на хостинг

Грузить файлы лучше в 2 захода, первый — все файлы кроме папки wp-content/uploads. Там лежат все картинки и часто эта папка занимает 95% всего размера сайта.

Лучше закинуть 200−300мб файлов самого сайта, а потом второй задачей закинуть папку uploads. Пока она загружатеся, вы сможете заняться другими делами.

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

Создать пустую базу

У каждого свой хостинг и свой интерфейс. Вам надо на своём хостинге создать пустую базу данных.

Импортировать в пустую базу данные нашей базы

Если у вас phpmyadmin — пользуйтесь импортом базы.

После вход нажмите на кнопку «Импорт».

Прикрепите файл базы

Нажмите кнопку «Вперёд».

Проверить данные для подключения базы

Для уточнения данных для подключения базы, зайдите в файл wp-config.php.

Вам нужно найти следующие строки:

define('DB_NAME', 'название базы данных');
define( 'DB_USER', 'логин от базы данных' );
define( 'DB_PASSWORD', 'пароль от базы данных' );
define( 'DB_HOST', 'хост вашего хостинга' );

И вставить туда данные вашей базы. Эти данные нужно запросить у хостинг-провайдера.

Перенастроить домен

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

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

Переходим в кореть сайта, переходим в файл wp-config.php и находим строчку define ('WP_DEBUG', false).

После неё вставляем текущий код. Менять нужно только ‘https’:

• Если домен использует ssl — https://
• Если не использует — http://

define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST']);

Заменить активного пользователя

Чтобы получить доступ к админке, надо заменить данные пользователя. Для этого переходиим в wp-users.

Там мы находим пользователя, который был на старом сайте. Можно даже не пытаться ввести такой же логин и пароль — пароль зашифрован.

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

Дальше заходим на страницу: https://ваш-сайт.ru/wp-login.php — это страница авторизации.

Нажимаем «Восстановить пароль» и восстанавливаем пароль. После этого вы сможете по тому же логину зайти со своим паролем. Если хотите — логин тоже можно поменять, делается тоже двойным кликом.

За подсказку спасибо Дмитрию Воробьеву.