Ответы пользователя по тегу JavaScript
  • Что конкретно учить в js для web-разработки?

    solidcreature
    @solidcreature
    WordPress-митапы в Москве (vk.com/wpmeetup)
    Здравствуйте. Если вы хотите стать фронт-енд разработчиком, то вам, действительно нужно изучать JS и весь современный стек технологий. Коллеги выше все написали.

    С другой стороны, если ваша задача создавать сайты, то здесь применение JS вполне конкретным: создание слайдеров, табов / аккордеонов, поп-апов, сложных меню, параллакса / анимации при прокрутке и т.д. Причем выигрышной стратегией будет не писать каждое решение с нуля, а использовать готовые библиотеки (slick slider, bootsrap и т.д.).

    Если правильно понял суть вопроса, то для того чтобы сайт стал "больше чем обертка" нужно изучать современные CMS. В частности WordPress. Научившись интегрировать вашу верстку в WordPress вы получите сразу кучу бонусов:
    - вместо html-страничек на выходе полноценный сайт
    - удобный интерфейс для работы с контентом
    - готовые решения для отзывов, сообщений, каталога товаров и т.д.
    - понятно где / как / для чего применять JS
    Ответ написан
  • Как системно и быстро обучаться программированию веб?

    solidcreature
    @solidcreature
    WordPress-митапы в Москве (vk.com/wpmeetup)
    Способ 1. Хотите быстрой прокачки — начните пилить свой проект. Только не для галочки, а так чтобы цепляло.

    Приведу два примера. 1) Как преподавателю мне хотелось сделать площадку для себя и студентов, сайт где можно выкладывать ДЗ и результаты выполнения, ставить оценки и писать комментарии. Так я познакомился с WordPress и сделал первый шаг в веб-разработку. Лет 5 назад с друзьями очень увлекались квестами в реальности. В какой-то момент захотелось сделать сайт про свои успехи и агрегатор квестов. На тот момент я уже занимался сайтами, но такого интенсивного потребления информации как в момент запуска сайта не было ни до ни после.

    Способ 2. Найдите тусовку с вашими интересами. Я говорю про митапы веб-разработчиков, найти можно «кружки» по люобому направлению, языку программирования или фреймворку. Сейчас с живыми встречами напряженка, но можно много интересного найти онлайн. Общение, обмен опытом, коллаборация и т.д.

    Способ 3. Если вам уже есть что показать — попробуйте пойти на стажировку в крутую компанию. "Крутость" в данном случае зависит от ваших амбиций и текущей локацией. Получите бесценный опыт и понимание как оно в жизни устроено. С таким багажом будет проще выстраивать карьеру.

    Способ 3б. Если стажировка кажется амбициозным проектом — возьмите заказ на фрилансе. Тут множество вариантов от условного Кворка, до поспрашивать по знакомым
    Ответ написан
  • Смена логотипа при скролле, как реализовать?

    solidcreature
    @solidcreature
    WordPress-митапы в Москве (vk.com/wpmeetup)
    Если логотипы находятся внутри div, к которому добавляется класс scrolled, то можно решить все цссом, если нет, тогда надо добавить в скрипт добавление класса scrolled для обертки логотипов

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

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

    solidcreature
    @solidcreature
    WordPress-митапы в Москве (vk.com/wpmeetup)
    Посмотрите в сторону Тильды с ее Zero Block. В плане визуального редактирования ничего удобнее пока не придумали. Но есть минусы в плане недешевой подписки и ограничений лицензионных на экспорт.

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

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

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

    solidcreature
    @solidcreature
    WordPress-митапы в Москве (vk.com/wpmeetup)
    Код представленный ниже нужно вставить в 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' );
    Ответ написан
  • Как правильно отключить анимацию scrollmagic под мобильные разрешения?

    solidcreature
    @solidcreature
    WordPress-митапы в Москве (vk.com/wpmeetup)
    Напишу ответ. Автору вряд ли уже актуально, но кто-то может искать решение подобной проблемы

    Вот что есть на стак-оверфлоу: https://stackoverflow.com/questions/44935111/disab...

    А вот что получилось у меня:

    jQuery(window).on('resize', function(){
    
        const width = jQuery(window).width();
    
        if( width <= 640 ){
          //Отключаем сцену если разрешение экрана меньше указанного
          scene.enabled(false);
        } else {
          //Включаем опять, когда возвращаемся в нормальное состояние
          scene.enabled(true);
        }
    });
    Ответ написан
  • Как правильно подгрузить свои стили и js в уже в готовый шаблон wordpress?

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

    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 и выберите для нее созданный шаблон. Посмотрите, если результат правильный -- назначьте эту страницу главной
    Ответ написан
  • Какой есть плагин WP для галереи который удовлетворяет определенным параметрам?

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

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