Шпора WordPress

  1. Плагины
  2. Функции

Sublime Text 2 »

Весь интерфейс находится в меню view

  • Показать/скрыть эксплорел Ctrl+k+b или просто перетянуть в редактор папку
  • Открытие файла по имени Ctrl+p
  • Все возможные команды Ctrl+Shift+p
  • Комментирование однострочный Ctrl+/, многострочный Ctrl+Alt+/
  • Множественные курсоры Ctrl+D (после выделения слова)
  • Дублирование строк Shift+Ctrl+G
  • Поиск и замена Ctrl+H

Установка плагина вордпресс. Сначала устанавливаем sublime package control

там копируем текст и в командной строке sublime добавляем его в консоли Ctrl+`

sublime-console

и у нас установится sublime package control, дальше уже нажимаем ctrl+shift+p у нас запустится окно с командами sublime и там мы вводим install и выбираем  install Package

sublime

у нас появится целый список доступных плагинов которые можно установить и там уже выбираем что мы собираемся устанавливать.

посмотреть установленные плагины можно командой list Package

После установки плагина wordpress комбинации доступные.

<?php theloop – нарисует полностью цикл wordpress

 

Получить описание темы в файле css вводим theme_head

theam_head

Настройки:

  • перенос по строкам “word_wrap”: “true” прописываем в файле настроек, по умолчанию там стоит auto

темы вордпресс должны состоять минимум из двух файлов index.php и style.css

Добавление screenshot к теме »

сделайте скриншот вашей темы и добавьте файл в папку с вашей темой с названием screenshot.phg и у вас появится в самом вордпрессе скрин вашей темы

screenshot theam

Небольшой примерчик использования функций-тегов вордпресс »

файл index.php темы

<html>
<head>

	<title><?php bloginfo("name"); ?></title>
</head>

<body>
	<!-- названия сайта -->
	<h1><?php bloginfo("name"); ?></h1>
	<!-- краткое описание -->
	<?php bloginfo("description"); ?>
	<br>
	<!-- получаем ссылку на главную страницу -->
	<a href="<?php echo home_url(); ?>">Главная страница</a>
	<br>
	<!-- получаем путь к теме -->
	<?php bloginfo("template_url"); ?>
	<br>
	<!-- получаем файл стилей темы style.css -->
	<?php bloginfo("stylesheet_url"); ?>

	<hr>

	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<h3><?php the_title() ?></h3>
		<!-- выводит контент -->
		<?php // the_content(); ?>
		<!-- выводит цитату, 
		если ее нету, то просто n символов -->
		<?php the_excerpt(); ?>
		<!-- возвращает ссылку на пост -->
		<a href="<?php the_permalink(); ?>">Читать полностью</a>
	<?php endwhile; ?>
	<!-- post navigation -->
	<?php else: ?>
	<!-- no posts found -->
	<?php endif; ?>

<hr><hr>
<?php 
	// в $post содержатся данные последней записи
	var_dump($post);
	echo "<br><br>";
	// в $posts содержатся данные всех постов
	// которые должны вывестись на странице 
	// с учетом пагинации - сколько их должно
	// выводится на страницу
	var_dump($posts);

	echo "<br><br>";

	foreach ($posts as $key => $value) {
		echo "<h3>".$value->post_title."</h3>";
		echo $value->post_excerpt."<br>";
		echo $value->post_content."<br>";
	}
?>

</body>
</html>

получить путь к папке с темой wordpress »

используем функцию

<?php bloginfo('template_url'); ?>/

и добавляем в конце слешь, например подключить css мы можем следующим образом

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/style.css">

и javaScript от так

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/test.js">

Файлы вордпресс темы »

  1. header.php – шапки
  2. footer.php – подвал
  3. sidebar.php – боковая панель
  4. function.php – файл функций обеспечивающий работу нашей темы

Скилет wordpress »

Просто приведу файлы, в них все закомментировано

функции wordpress которые использовали:

  • get_header(),get_sidebar(), get_footer() – функции подключают стандартные файлы, если без параметров, а с параметрами хз. наверно те что передаем
  • wp_head(); – подключается в файле header.php, ее нужно подключать перед тегом </head>, этот файл вроде за плагины отвечает или хз.
  • wp_footer(); – подключается в файле footer.php в самом конце, как бы в самом конце перед </body>, а этот файл вроде подключает панель администратора, что появляется вверху когда мы авторизованы на сайте
  • bloginfo(‘name’);/*название сайта*/ wp_title(); /*название страницы*/ ?> – эти функции возвращают название сайта и wp_title – название для страниц, для главноей страницы названия не будет.
  • home_url(); /*ссылка на главную страницу сайта*/ ссылка на гавную страницу сайта

index.php

<!-- подключаем стандартный header -->
<?php get_header(); ?>
	<div class="content">content
</div>
<!-- стандартный сайдбар -->
	<?php get_sidebar(); ?>
<!-- стандартный футер -->
	<?php get_footer(); ?>

style.css

/*
Theme Name: Theme Name
Theme URI: http://example.com/
Description: Description
Version: 1.0
Author: Your Name
Author URI: http://example.com/
Tags: one, two
*/
/*Зброс*/
*{
	margin: 0px;
	padding: 0px;
}

body{
	font-size: 25px;
	margin:0px;
	padding: 0px;
	/*background: #113333;*/
}
.container{
	background: #00ff00;
	max-width: 900px;
	margin: 10px auto;
}
.header{
	background: #ff0000;
	height: 150px;
}
.nav{
	background: #f0f;
}
.content{
	background: #00f;
	min-height: 200px;
	width: 70%;
	float: left;
	
}
.right-menu{
	background: #ccc;
	height: 100px;
	width: 30%;
	float: right;
}
.footer{
	background: #f00;
	height: 100px;
	clear: both;
}

header.php

<html>
<head>
	
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css">
 	<title><?php bloginfo('name');/*название сайта*/ wp_title(); /*название страницы*/ ?></title>
<!-- Обязательная строка в любой теме вордпресс -->
<?php wp_head(); ?>
</head>

<body>
<div class="container">
	<div class="header">
		<a href="<?php home_url(); /*ссылка на главную страницу сайта*/ ?>">Главная</a>
	</div>
	<div class="nav">nav</div>

footer.php

<div class="footer">footer</div>
</div>
<!-- Обязательная строка в любой теме вордпресс -->
<?php wp_footer(); ?>
</body>
</html>

sidebar.php

<div class="right-menu">right-menu</div>

И на выходе у нас получится от такая картинка

theme wordpress

Подключение файлов CSS и скриптов Javascritp в wordpress »

Используемые функции

  • wp_enqueue_scripts – стандартная функция вордпресс на которую мы цепляем через хук свою собственную функцию для подключения скприптов
  • wp_enqueue_script и wp_enqueue_style функции вызываются из своей собсвтенной функции и в качестве параметров передаются названия файлов и путь к подключаемым файлам (wp_enqueue_style(‘style’, get_template_directory_uri().’/style.css’);)
  • get_template_directory_uri() – возвращает путь в виде переменной к папке с темой
  • add_action – так называемый хук действий.

Подключать файлы CSS и JavaScript нужно псециальным способом, чтобы небыло конфликтов, для этого создаем файл functions.php – это файл в котором создаются функции для нашей темы. Дальше в этом файле создаем хук действия add_action для функции wordpress wp_enqueue_scripts и  к ней добавляем нашу собственную функцию под названием load_style_script

Таким способом можно подключать несколько скриптов и файлов css вызывав соответственно несколько раз для каждого скрипта функции wp_enqueue_script или wp_enqueue_style 🙂

вот файл function.php

<?php
/**
* загружаемые стили и скрипты
**/
//наша собственная функция
function load_style_script(){
	// специальная функция для подключения скриптов
	// где myscript - это название скрипта, а 
	// get_template_directory_uri().'/js/myscript.js' - это
	// путь к скрипту
	wp_enqueue_script('myscript', get_template_directory_uri().'/js/myscript.js');
	// специальная функция для подключения css
	// аналогично, что означают параметры смотрим выше.
	wp_enqueue_style('style', get_template_directory_uri().'/style.css');
}

/**
* загружаем стили и скрипты
**/
// это наш собственный хук, который на функцию вордпресс
// wp_enqueue_scripts цепляет нашу собственную функцию load_style_script
add_action('wp_enqueue_scripts','load_style_script');

?>

вот скрин где находятся наши файлы

tree_file

вот что у нас в файле header.php

<html>
<head>
	
 	<title><?php bloginfo('name');/*название сайта*/ wp_title(); /*название страницы*/ ?></title>
<!-- Обязательная строка в любой теме вордпресс -->
<?php wp_head(); ?>
</head>

<body>
<div class="container">
	<div class="header">
		<a href="<?php home_url(); /*ссылка на главную страницу сайта*/ ?>">Главная</a>
	</div>
	<div class="nav">nav</div>

как видно ни скрипты ни другие файлы у нас не подключаются, если мы глянем на исходный html код, страницы, то там у нас все подключилось

include_script_style_wordpress

Вот так в общем подключается.

Добавление поддержики миниатюр в теме wordpress »

в файле functions.php вашей темы добавте следующий код

/**
* Добавление миниатюры к теме
**/
add_theme_support('post-thumbnails');

все и у вас появится в админке форма для добавления миниатюры

Добавляет возможность создания меню в теме »

добавляем следующий код в файл functions.php

/**
* регистрация меню
**/
// первый параметр идентификатор, второй описание меню
register_nav_menu('menu','Меню');

и у нас появляется подпункт “меню” в админской панели, где мы можем редактировать наше меню

wordpress_menu

 

 

 

 

Комментарии:

Оставить комментарий

Your email address will not be published. Required fields are marked *

© 2017 kselax.ru