Архивы WP-theme | Разработка дизайна сайта, фирменного стиля, логотипов

01 Создание обложки для темы WordPress

LexusGT — Mon, 11 Jun 2018 14:49:10 +0000

Создаем в графическом редакторе (Photoshop) png файл:

Название файла: screenshot.png

Размер файла: 1200 x 900 px

Где посмотреть результат: меню выбора темы Внешний вид => Темы

Куда заливать: wp-content/themes/myThemeName/

Запись 01 Создание обложки для темы WordPress впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

02 Описание WordPress темы в файле CSS

LexusGT — Mon, 11 Jun 2018 14:51:12 +0000

Где прописывать: wp-content/themes/myThemeName/style.css

Какие свойства прописывать:

/*
Theme Name: Alesh
Theme URI: домашняя-страница-темы
Description: краткое-описание-темы
Author: ваше-имя
Author URI: ваш-URI
Template: напишите-здесь-наименование-родительской-темы--необязательное-поле
Version: номер-версии--необязательное-поле

Text Domain: alesh - как название, только с маленькой буквы!
.
Развёрнутое описание темы/Лицензия-если-нужно.
.
*/

Запись 02 Описание WordPress темы в файле CSS впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

02А Разбиваем верстку на повторяющиеся блоки

LexusGT — Mon, 11 Jun 2018 15:21:20 +0000

Как правило в теме есть блоки которые повторяются.

Для таких блоков создаем папку в корне темы: template-parts

В эту папку будем складывать разные блоки сайта:

popular.php
last-news.php
gallery.php
и т.п.

Файлы footer.php и header.php должны лежать в корне темы!

Запись 02А Разбиваем верстку на повторяющиеся блоки впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

03 autoDeploy Git SSH

LexusGT — Sun, 29 Jan 2023 18:48:03 +0000

Создаем в проекте папку .ssh
Генерируем пару ключей (через GitBash)
```
ssh-keygen -t rsa -b 2048
```
Копируем публичный ключ на хостинг
```
$ ssh-copy-id -i ~/.ssh/id_rsa.pub a0201443@000.000.000.000 
```
Можно скопировать вручную в папку: /home/a0201443/.ssh
Добавляем приватный ключ на GitHub в Settings > Secrets and variables > Actions
Имя ключа: key
В проекте создаем файл deploy.yml внутри папок .github/workflows

Код файла: скачать

name: Deploy

on:

  push:

    branches:

      - master

jobs:

  deploy:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v3

      # Setup key

      - run: set -eu

      - run: mkdir "$HOME/.ssh"

      - run: echo "${{ secrets.key }}" > "$HOME/.ssh/key"

      - run: chmod 600 "$HOME/.ssh/key"

      # Deploy

      - run: rsync -e "ssh -p 22 -i $HOME/.ssh/key -o StrictHostKeyChecking=no" --archive --compress --delete . a0201443@000.000.000.000:/home/a0201443/domains/wexeb.ru/public_html/bankstoday/wp-content/themes/bankstoday

Запись 03 autoDeploy Git SSH впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

03 Подключаем шапку и подвал для тем WordPress

LexusGT — Mon, 11 Jun 2018 14:57:31 +0000

Разбиваем верстку на файлы.

Повторяющиеся верхние блоки (шапка сайта) переносим в файл header.php

Повторяющиеся нижние блоки (подвал сайта) переносим в файл footer.php

Чтобы вывести на станице шапку и подвал сайта, прописывает такой код в начале и конце страницы:

Выводим значениями текущего языка и кодировку сайта:

Для body. Подробнее тут

Запись 03 Подключаем шапку и подвал для тем WordPress впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

04 Подключение стилей и скриптов в WordPress теме

LexusGT — Mon, 11 Jun 2018 15:01:19 +0000

1 В корне темы создаем файл functions.php

2 В файле functions.php добавить код:

add_action( 'wp_enqueue_scripts', 'speert_name_scripts' );
function speert_name_scripts() {
wp_enqueue_style( 'style-main', get_stylesheet_uri() );
wp_enqueue_style( 'style-min', get_stylesheet_directory_uri().'/css/main.min.css' );
wp_enqueue_style( 'slick-theme', get_stylesheet_directory_uri().'/libs/slick/slick-theme.css' );
wp_enqueue_script( 'script-min', get_template_directory_uri() . '/js/scripts.min.js', array(), false, true );
wp_enqueue_script( 'script-slick', get_template_directory_uri() . '/libs/slick/slick.min.js', array(), false, true );
//выводим стиль только на станицах single
if (is_single()){ wp_enqueue_style( 'single-page', get_stylesheet_directory_uri().'single.css' ); }
}

Не забываем в хедере вставлять перед :

в футере прямо перед закрывающим HTML тегом :

Запись 04 Подключение стилей и скриптов в WordPress теме впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

05 Подключаем локализацию, title, логотип, миниатюры, html5, типы постов

LexusGT — Mon, 11 Jun 2018 18:55:38 +0000

Добавляем в function.php следующие код:

// Setup theme
function speert_setup() {
	load_theme_textdomain( 'lng_speert' ); // localization
	add_theme_support( 'title-tag' ); // выводим Title на всех страницах
	// настройка логотипа через Customizer
	add_theme_support( 'custom-logo', array( 
		'height'			=> 30,
		'width'			=> 150,
		'flex-width'	=> true
	));
	add_theme_support( 'post-thumbnails' ); // подключение миниатюр
	set_post_thumbnail_size (750,480);

	//Включает поддержку html5
	add_theme_support( 'html5', array(
		'search-form',
		'comment-form',
		'comment-list',
		'gallery',
		'caption'
	));

	//Включает форматы постов
	add_theme_support('post-formats', array(
		'aside',
		'image',
		'video',
		'gallery'
	));
}
add_action( 'after_setup_theme', 'speert_setup' );

Регистрируем новый размер миниатюр. В файл function.php добавляем код (вне всех функций!):

add_image_size( 'name-size-m-crop', 580, 300, true );
add_image_size( 'name-size-s', 394, 210 );
add_image_size( 'name-size-x', 288, 154 );

Для библиотеки картинок (выводим размеры в админ-панели)

Чтобы добавить новый размер в выбор размеров при вставке картинки в пост, нужно использовать фильтр-хук image_size_names_choose, в котором нужно добавить размер и указать для него понятное название:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
	return array_merge( $sizes, array(
		'category-thumb' => 'Мой размерчик',
	) );
}

В редких случаях! Отключаем создание стандартных миниатюр:

function wplift_remove_image_sizes( $sizes) {
unset( $sizes['thumbnail']);
unset( $sizes['medium']);
unset( $sizes['large']);
return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'wplift_remove_image_sizes');

Вывод логотипа с помощью функции:

Запись 05 Подключаем локализацию, title, логотип, миниатюры, html5, типы постов впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

06 Подключение и настройка меню для WordPress

LexusGT — Mon, 11 Jun 2018 20:26:31 +0000

Вставляем в functions.php

// Включаем поддержку меню
add_action( 'after_setup_theme', function(){
	register_nav_menus( [
		'header_menu' => 'Меню в шапке',
		'footer_menu' => 'Меню в подвале'
	] );
});

На страницах где нужно вывести меню вставляем код:

wp_nav_menu

Запись 06 Подключение и настройка меню для WordPress впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

07 Цикл WordPress. Вывод записей

LexusGT — Mon, 11 Jun 2018 21:23:00 +0000

Теория: wp-kama

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


 4, 'posts_per_page' => 5); // 5 записей из выбранной рубрики
 $myposts = get_posts( $args );
  foreach( $myposts as $post ){ setup_postdata($post);
   // стандартный вывод записей ?>

Запись 07 Цикл WordPress. Вывод записей впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

07А Вывод произвольной записи вне цикла

LexusGT — Wed, 25 Jul 2018 18:35:14 +0000

Добавьте в файл function.php функцию:

function getPostById($id){
	//выводит заголовок, миниатюру и ссылку на статью
	//краткое описание берется из цитаты
	$out='';
	$post=get_post($id);
	$out.='';
	$out.='';
	$out.=$post->post_title; //получаем заголовок записи
	$out.='';
	$out.='';
	$out.='';
	$out.=get_the_post_thumbnail($id, 'ppthmb'); //получаем миниатюру, ppthmb - класс изображения
	$out.='';
	$out.='';
	//получаем цитату из записи
	$out.=get_the_excerpt($post->ID);
	$out.='';
	echo $out;
}

Для вызова функции используйте код:

Данный код выведет заголовок статьи, изображение из миниатюры, текст из блока отрывок и ссылку на статью.

Запись 07А Вывод произвольной записи вне цикла впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.