Вставляем форму добавления статей на сайт — создаем социальную сеть на базе wordpress. Часть 3.

Сегодня я расскажу вам о интересном пунктике, который может пригодиться для очень разнообразных задач. Это функционал добавления статей прямо с сайта. Примером использования данного функционала могут быть и социальные сети, и разнообразные каталоги статей, и доски объявлений, да и вообще абсолютно любые формы, хоть и контактная форма.

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

Начало цикла статей о том как создать социальную сеть на базе wordpress

Итак, первое, что нам нужно — это установить плагин . Самый последний русификатор можно взять .

После установки, нужно произвести некоторые настройки.

Идем в опции плагина — вторая вкладка «записи» — отмечаем галочкой что нужно исправлять автора. Эта функция делает так, чтобы после апрува админом, статья которая будет публиковаться имела автора именно того, кто её добавил, а не админа. По умолчанию, все одобренные статьи будут иметь автора того, кто её одобрил, т.е. админа, а не реального автора, кто её добавил.

С остальными опциями можете поэкспериментировать сами, но обычно я ничего не трогаю здесь.

Далее, в опциях формы указывайте её название, кто имеет право доступа, нужно ли модерировать статьи и т.д. — в принципе ничего непонятного нет.

На следующей вкладке вы должны создать форму, просто перетягивайте нужные виджеты в форму, справа от каждого виджета будет значок

При нажатии будут доступны дополнительные настройки виджетов.

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

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

Я перепробовал очень много визуальных редакторов — вообще брал статью с западного блога, где перечислены все виз редакторы и просто пробовал каждый подключать.

Скажу сразу, выбор невелик, в основном все редакторы или слишком просты, или генерируют паршивый код. Изначально выбор пал на NicEdit — подключается одной строкой, легок. Но как глянул его код — вместо тега strong он вставляет span style=»font-weight:bold» — это никуда не годится.

Далее пробовал Tiny MCE знаменитый, но не удалось подключить к нему функционал заливки картинок, так как такой модуль есть, но он платный.

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

Единственным нормальным вариантом оказался в связке с . 1 — это сам визуальный редактор, 2 — модуль загрузки и обозреватель картинок. Функционал у этого редактора очень обширный, хорошо расписана документация, легко внедряется. Ниже я и расскажу как, чтобы вам время не тратить на поиски.

Сначала, заливаем папку с виз редактором в wp-content, папку с ckfinder заливаем в папку визредактора. Потом, после создания формы в TDO mini forms переходим на вкладку шаблоны — увидите код вашей формы. Вверху добавляем вызов скрипта, обычно это

<script type="text/javascript" src="<?php echo get_bloginfo('url'); ?>/wp-content/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('url'); ?>/wp-content/ckeditor/ckfinder/ckfinder.js"></script>

Далее в шаблоне ищем textarea в который мы и вставим виз редактор. Обычно это

<textarea title="Текст записи" rows="20" cols="40" name="content-text-ta" id="content-text-ta" ><?php if(isset($post_args["content-text-ta"])) {
				echo $post_args["content-text-ta"];
			} else { ?><?php } ?></textarea>

Как видите id нашей textarea — «content-text-ta» — это нужно записать, дальше это нужно будет

Сразу же после textarea нам нужно вставить вызов редактора. Я сразу вам приведу пример кода вставки визуального редактора и загрузчика картинок.

<script type="text/javascript">

// This is a check for the CKEditor class. If not defined, the paths must be checked.
if ( typeof CKEDITOR == 'undefined' )
{
	document.write(
		'<strong><span style="color: #ff0000">Error</span>: CKEditor not found</strong>.' +
		'This sample assumes that CKEditor (not included with CKFinder) is installed in' +
		'the "/ckeditor/" path. If you have it installed in a different place, just edit' +
		'this file, changing the wrong paths in the &lt;head&gt; (line 5) and the "BasePath"' +
		'value (line 32).' ) ;
}
else
{
	var editor = CKEDITOR.replace( 'content-text-ta' );
	editor.setData( '<p>Вы можете добавить здесь вашу статью, пользуясь визуальным редактором</p>' );
	
	// Just call CKFinder.SetupCKEditor and pass the CKEditor instance as the first argument.
	// The second parameter (optional), is the path for the CKFinder installation (default = "/ckfinder/").
	CKFinder.SetupCKEditor( editor, '<?php echo get_bloginfo('url'); ?>/wp-content/ckeditor/ckfinder/' ) ;

	// It is also possible to pass an object with selected CKFinder properties as a second argument.
	// CKFinder.SetupCKEditor( editor, { BasePath : '', RememberLastFolder : false } ) ;	
}

		</script>

очень важно в приведенном примере, чтобы ckfinder был загружен в папку с виз редактором, если он у вас загружен в другую папку, то нужно её прописать изменив строку

CKFinder.SetupCKEditor( editor, '<?php echo get_bloginfo('url'); ?>/wp-content/ckeditor/ckfinder/' ) ;

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

После подключения, вам нужно ещё кой чего изменить, чтобы работал загрузчик изображений. В папке cfinder в файле config.php поставить в строчке

function CheckAuthentication()
{
	// WARNING : DO NOT simply return "true". By doing so, you are allowing
	// "anyone" to upload and list the files in your server. You must implement
	// some kind of session validation here. Even something very simple as...

	// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];

	// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
	// user logs in your system.
	// To be able to use session variables don't forget to add session_start().

	return true;
}

должно быть true

Далее, ищем значение $baseUrl и в кавычках указываем полный путь с http:// до папки куда нужно загружать картинки и файлы. К стати, папка должна иметь права доступа 777, также иногда внутри папки не создаются нужные подпапки, их нужно вручную сделать. Для картинок нужна папка Images — права доступа тоже 777

Дополнительно также нужно указать полный путь на сервере в значении $baseDir. Пример:

$baseDir = '/var/www/vhosts/сайт.ру/httpdocs/wp-content/ckeditor/ckfinder/userfiles/';

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

UPD. не знаю какая уже будет доступна версия редактора на тот момент, когда будете ставить, но заметил один глюк (и не только я), что последняя версия ckeditor не хочет работать с последней версией ckfinder. Если вы уверены, что сделали все правильно, но загрузка не работает (нет вообще такой вкладки) — то попробуйте установить не последнюю версию ckfinder, а предпоследнюю

UPD. Данная статья немного устарела, метод рабочий, но начиная с версии 3.3 в wordpress появилась возможность выводить стандартный виз. редактор на сайт. Читайте об этом в продолжении статьи «вставить форму добавления статей на сайт«

Похожие статьи:

• Jquery валидация форм
• Image cms — хороший движок для дизайнера
• Как интегрировать свой слайдер в wordpress