Как отредактировать шапку в стандартной теме Storefront WordPress?

Попался мне заказ связанный со стандартной темой WordPress Storefront. Попросил заказчик заменить в шапке строку поиска своими контактами. Ну что ж, для меня не решаемых проблем почти нет и я смело полезла в файл header.php. Какой же сюрприз меня там ждал!!! Все функции шапки прописаны вот таким вот образом:

<?php
/**
* Functions hooked into storefront_header action
*
* @hooked storefront_header_container — 0
* @hooked storefront_skip_links — 5
* @hooked storefront_social_icons — 10
* @hooked storefront_site_branding — 20
* @hooked storefront_secondary_navigation — 30
* @hooked storefront_product_search — 40
* @hooked storefront_header_container_close — 41
* @hooked storefront_primary_navigation_wrapper — 42
* @hooked storefront_primary_navigation — 50
* @hooked storefront_header_cart — 60
* @hooked storefront_primary_navigation_wrapper_close — 68
*/
do_action( ‘storefront_header’ );
?>

 

Загадка…. Пришлось лезть глубже, шарить по файлам, потом в гугле, яндексе, по разным сайтам… Но, минут через 5 ответ нашелся.

Если вы хотите изменить что-то в шапке темы Storefront, идите сразу в файл …storefront/inc/woocommerce/storefront-woocommerce-template-functions.php

Мне было нужно изменить именно поиск, а точнее заместо него прописать контакты. Поиск прописан примерно со строчки 83. Я нашла там:

<div class=»site-search»>

<?php the_widget( ‘WC_Widget_Product_Search’, ‘title=’ ); ?>

</div>

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

<div align=»center»><span style=»font-size:20px;»>Мой WhatsApp </span></div>

<div align=»center»><span style=»font-size:20px;»><a href=»https://api.whatsapp.com/send?phone=77473554324″>+7 (747) 355 43 24</a></span></div>

Да-да, это кстати мой WhatsApp, и если вам нужны мои услуги, то пишите!

Мой WhatsApp
+7 (747) 355 43 24

И не забудьте, что все эти манипуляции надо делать в дочерней теме! Иначе при первом же обновлении все ваши настройки канут в Лету.

Изменить цвет всех кнопок на сайте через css

Чтобы поменять цвет всех кнопок на сайте, в раздел «Настройки — Дополнительные стили», вставьте следующий код:

.wp-block-button__link 
{background-color: #fff !important;}

где параметр background-color можете заменить на любой цвет в формате NEX.

Внимание! Этот код заменит цвет абсолютно всех кнопок на сайте!

Как сделать отступы в тексте при помощи кода

Если вам нужно сделать отступ от края справа или слева на определенную ширину, можно воспользоваться кодом.

<p style="margin-left: 50px; margin-right: 50px;">Текст</p>

В данном тексте, отступы спереди и сзади по 50 px. Если вы хотите сделать отступ только слева, то удалите участок кода margin-right: 50px;, если только справа, то margin-left: 50px;

Как удалить сайдбар со страницы товара

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

body.single-product .widget-area {
    display: none;
}
body.single-product  .content-area {
    width: 100% !important;
}

Где body.single-product как раз и отвечает за то, что правило будет применяться только в карточке товара.

Как в woocommerce автоматически завершить заказ если он в статусе «processing»(В ожидании оплаты)?

Следующий код будет автоматически переводить все заказы у которых статус «processing» (В ожидании оплаты) в статус «completed» (Выполнен):

/**
 * Auto Complete all WooCommerce orders.
 */
 add_action( 'woocommerce_thankyou', 'custom_woocommerce_auto_complete_order' );
 function custom_woocommerce_auto_complete_order( $order_id ) {
 if ( ! $order_id ) {
 return;
 }
$order = wc_get_order( $order_id );
 $order->update_status( 'completed' );
 }

Код вставлять в файл functions.php который расположен в папке с вашей темой(которую вы используете на сайте).

Как убрать рекламу на Youtube навсегда

Интересное решение от самого сайта Youtube заключается в том, что сам видеохостинг разрешает отключить вообще всю рекламу навсегда, при помощи кода. Это помогает не только посетителям, но и самому сервису собирать статистику посещений, анализировать поведение пользователей, связанное с показом объявлений. Чтобы воспользоваться предлагаемой возможностью, вам потребуется слегка видоизменить куки через браузерную консоль. Для этого:

  • заходим на youtube.com;
  • для Сhrome или Opera нажимаем комбинацию клавиш “Ctrl+Shift+J” в Windows (или же последовательность Command-Option-J из Mac OS);
  • для браузера Firefox аналогичным образом сработают кнопки Ctrl+Shift+K\Command-Option-K (Win\Mac соответственно);
  • для современных версий Internet Explorer жмем F12 и переходим к пункту “Console“;
  • когда консоль откроется, копируем в нее строку

 

document.cookie=”VISITOR_INFO1_LIVE=oKckVSqvaGw; path=/; domain=.youtube.com“;window.location.reload()
  • Жмем “Enter“
  • больше рекламы на Ютубе не будет.

Добавляем поле количества на страницу товарной категории в WooCommerce

Если вы работаете с WooCommerce, то наверняка знаете, что по-умолчанию на страницах архивов (товарных категорий) нет полей ввода количества товара. Возможно используемая вами тема  содержит такой функционал, но во многих этой фичи нет. 

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

/**
 * Переопределить шаблон цикла и показать количество рядом с кнопками добавить в корзину
 */
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
функция quantity_inputs_for_woocommerce_loop_add_to_cart_link ($html, $product ) {
 если ($product && $product - >is_type ('simple') & & $product->>is_purchasable () & & $product->>>is_in_stock ()&&! $product - >is_sold_individually() ) {
 $html = ' < form  action ="'. esc_url ($product->add_to_cart_url ())). '" class =" cart " method =" post " enctype =" multipart / form-data ">';
 $формат HTML. = woocommerce_quantity_input (array (), $product, false );
 $формат HTML. = '< button  type = "submit"  class = "button alt">'. esc_html ($product->add_to_cart_text ())). '</кнопка>';
 $формат HTML. = '</form>';
	}
 возврат $ html;
}

Этот код надо добавить в файл вашей дочерней темы functions.php. Не стоит добавлять этот код непосредственно в файл родительской темы, так как он будет полностью удален при обновлении темы.

Актуально для версии WooCommerce 3.6.5. возможно при обновлении, код работать не будет или будет работать не корректно.

Переворачивающаяся картинка CSS. Самый простой код.

Пример поворачивающейся карточки с картинкой. С лицевой стороны у карточки картинка, на обратной стороне — картинка или текст. При наведении мыши, картинка поворачивается на 180 градусов. Такой эффект можно применять к карточкам товара, к профилю соц. сетей и портфолио.

Картинка — картинка

 
 

 

Картинка — текст

 
Описание картинки

Купить код

Html код поисковой строки для Word Press

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

Вместо http://вашсайт.ru вставьте url вашего сайта.

<aside id="search" class="widget widget_search"><form role="search" method="get" class="search-form" action="http://вашсайт.ru">
				<label>
					<span class="screen-reader-text">Найти:</span>
					<input type="search" class="search-field" placeholder="Поиск…" value="" name="s">
				</label>
				<input type="submit" class="search-submit" value="Поиск">
			</form></aside>

Пример:

Простые анимация для сайта html

gif 404

Возможно, вы иногда замечали, как на сайте движется текстовый контент по горизонтали или вертикали, а может даже передвигаются изображения. Выглядит это сложновато, но на самом деле за это отвечает всего лишь один тег языка html <marquee>.

Это не новый элемент и не относиться к html5. Изначально он был создан для Internet Explorer, но спустя время его стали поддерживать и другие браузеры.

Итак, как же создать бегущую строку? На самом деле нужно просто ввести необходимый текст в парном теге <marquee> – и он «побежит». Другое дело, как именно он будет двигаться.

Ниже добавлена таблица с описанием важных атрибутов данного элемента.


Атрибут

Описание

behavior
Указывает способ передвижения контента:
alternate – содержимое двигается между двумя границами, отбиваясь от них;
scroll – объект движется как бы по кругу (появляется с одной стороны, скрывается с другой);
slide – контент проходит весь путь и останавливается.

loop
Определяет сколько раз будет повторяться содержимое описываемого тега. Например, -1 используется для бесконечного повторения.

direction
Устанавливает направление передвижения:
down – движется с верхнего края вниз;
left – от правого края влево;
up – от нижней границы к верхней;
right – слева направо.

scrollamount
Задает пиксельное расстояние между текущим положением объекта и следующим. Влияет на скорость движения. Изначально равен 6.

scrolldelay
Также влияет на скорость «бега», однако за счет частоты обновления. Устанавливает задержку в миллисекундах.

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


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
 .one {
 width:300px;
 height:200px;
 text-shadow: #000 0px 1px 1px;
 color: #6004b5;
 font-size: 110px;
 font-weight: bolder;
 margin-left:30px;
padding-left:25px;
 }
</style>

<marquee class="one" behavior="alternate" direction="down" scrollamount="12">404</marquee>

<marquee direction="right" scrollamount="15""><figure><img src="https://ya-webdesign.com/images/cat-gif-png-6.gif"></figure></marquee>

На странице отобразились две анимации: прыгающая строка и бегущий котик.