Отборная информация, которая вставляет!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Единственным нормальным вариантом оказался CKEditor в связке с CKFinder. 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 появилась возможность выводить стандартный виз. редактор на сайт. Читайте об этом в продолжении статьи «вставить форму добавления статей на сайт«


 

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



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

  1. Привет, полезная статья, но есть один вопрос:
    при добавлении изображения выскакивает окно, но там поле только для URL-а, разве нет такой возможности, чтобы добавить изображение со своего компьютера, а не только с других сайтов?

    • ETNO:

      если делать как я описывал в статье — то есть, нужно просто перейти на вкладку «закачать»

      • Частичный ответ нашёл здесь http://fleek.org/fleekaj/WBVNEgxMS08RT0pdExdJUFUbFkdOW1oBURhQVAAEAg==/, вкладка появилась, но загружать нормально не хочет, после загрузки выдаёт iframe в котором открывает страницу /undefined. Если же просто указать url файла с какого-нибудь сайта, то загружает нормально. Может сможете выложить свои исходники для проверки?

        • ETNO:

          так я в статье и выложил рабочие исходники, которые работают уже на 4 сайте на wp на 3 разных хостингах. очень важно в файле config.php прописать baseurl и внести все коррективы как я описывал в конце статьи.

  2. Спасибо за цикл статей, добрался по пунктам до этой статьи.
    Возник маленький вопрос:
    возможность добавлять статьи не заходя в админку появилась, все нормально, НО где/как увидеть в редакторе кнопку для загрузки/добавления изображений? Ссылку на изображение принимает, но «загрузчика» не видно…

  3. И вообще, мб действительно исходником поделишься, а то уже у второго не работает. Пробовал на вин и линукс серваках

    • ETNO:

      http://fleek.org/fleekaj/WBVNEgxMS0gHVgBcCBBYH1paCR0FWlcEQl4QS0pFVBJJFBY=/ — проверьте отображается ли у вас третья картинка в этой статье. И ещё раз скажу — чтобы работал загрузчик изображений, нужно скачать с сайта и ckfinder и положить его в папку где и ckeditor — и вставлять код как я описывал статье + настроить config.php как я описывал

      • Кнопка с рисунком есть, но вкладки «загрузить» — нету. Прописал hidden: false — не помогло.

        Мб еще раз для примера пробежимся?

        >$baseUrl и в кавычках указываем полный путь с http:// до папки куда нужно загружать картинки и файлы

        Например:
        $baseUrl = «http://example.org/users/images/»;

        >Для картинок нужна папка Images – права доступа тоже 777
        Вот тут не понятно. Масло масленое?

        >указать полный путь на сервере в значении $baseDir
        Например:
        $baseDir = ‘/var/www/vhosts/example.org//users/images/’;

        Ведь такая логика?
        Все сделал строго по примеру.
        Мб когда была написана статья версия CKEditor и CKFinder были другие?

        • example.org// — одначерта, опечатался, исправьте, плиз

        • ETNO:

          >Для картинок нужна папка Images – права доступа тоже 777 в папке куда нужно загружать картинки по умолчанию очень часто не создаются подпапки, их нужно создать вручную. Для картинок это папка Images, права на неё должны быть 777.

          и да, версии были другие. к стати, однажды у меня новый ckfinder не работал на новом ckeditor — когда поставил ckfinder на одну версию ниже — тогда все ок стало, попробуйте тоже так.

  4. Танцы с бубном =)
    Разобрался чек чему:

    1. Нужен старее CKFinder 1.4.3 от 2010.02.18
    http://fleek.org/fleekaj/WBVNEgxMS1wJTwpVDgNdH1peF10UR1YAGlQLCxZyfiBZD10HREwncyBRCl0EEBwDCVMLQEQHBTV8Z0tXFwUbVR8CUgRfDQBdFGcUURE9CB8NG1ccG1xF/

    2. FCKeditor 2.6.6 (самый новый)

    Тогда все работает.

    Еще раз спасибо за цикл статей, это шедевр!

    • ETNO:

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

    • За ссылку спасибо. Поделюсь своими результатами:
      CKFinder 1.4.3 и CKeditor 3.4
      В настройках CKFinder config.php в переменной $baseDir указал относительный путь от корня сайта, заключённый в функцию resolveUrl, если указывать просто полный путь (навроде ‘/var/www/vhosts/example.org/users/images/’) или убрать функцию, то пишет про проблему с правами и не закачивает

      $baseDir = resolveUrl(‘/wp-content/uploads/’);

      Так же, если хочется убрать надоедливую надпись «This is the demo version of CKFinder.» при просмотре имеющихся изображений, то в файле config.php надо указать строчки:
      $config[‘LicenseName’] = $_SERVER[‘HTTP_HOST’];
      $config[‘LicenseKey’] = ‘C1234567A89BC’;

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

    • У меня тоже была такая проблема:
      1. Установил 3 ВП
      2. Скопировал «Шаблон формы» с локального сервака и все заработало.
      У меня есть предположение, что иногда сама форма создается криво, попробуйте заново создать простую форму.

  6. Санька:

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

  7. Не редактируется шаблон формы. Никак. ЧТо делать?

  8. FHD:

    1) Вы пишите: «Как видите id нашей textarea – “content-text-ta” – это нужно записать, дальше это нужно будет»
    — Зачем это нам нужно будет? Дальше вы нигде в статье это не используете.

    2) Вы пишите:
    «Сразу же после textarea нам нужно вставить вызов редактора. Я сразу вам приведу пример кода вставки визуального редактора и загрузчика картинок.»
    — После закрытия textarea ??? Или куда именно?

    • ETNO:

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

  9. FHD:

    1. Почему мы редактор ставил уже после textarea? Получается редактор внизу поля ввода, а надо бы вверху.
    2. Вы пишите «id нашей textarea – “content-text-ta”». То есть если у меня также называется, то код внизу можно не менять? («Я сразу вам приведу пример кода вставки визуального редактора и загрузчика картинок.»)
    Вставить после textarea и всё заработает (кроме вставки картинок)?
    Я так всё и сделал, но не отобразился редактор, помогите. WP 3.01 Локалхост, денвер, пробовал несколько тем, FCKeditor 2.6.6, CKFinder 1.4.3 в папке wp-content.
    Хелп ми, инетерсно, почему не работает? Может из-за версии плагина TDO 0.13.9 (в нем кстати есть свой редактор, небольшой и с вставкой картинок с урела)???

    • ETNO:

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

  10. kooll:

    Что делать, если все изменения в шаблоне не сохраняются? Я нажимаю сохранить, а он сбрасывает изменения.

  11. Полезно — обязательно сегодня попробую!

  12. FHD:

    Вопрос: У вас в форме на картинке плагина TDO mini forms выбрано «Брать рубрику GET из переменных», а перед ней Категории. Категорию выбрать это понятно, а первое что делает («Брать рубрику GET из переменных»)?

    Обясните поподробнее, если не сложно.

    • ETNO:

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

  13. Честно говоря, ничего не понял! Создал шаблон формы, осуществил настройки. А где сама форма находится? Где зарегистрированному пользователю её увидеть?

    • ETNO:

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

  14. У меня получилось встроить редактор в форму для создания новой статьи. Все без проблем. Но не получается корректно вставить редактор для редактирования статьи. При формировании страницы в форме textarea должен заменяться сгенерированным кодом js. Если я пробую вставить editor.setData( ‘post_content; ?>’ );
    То видимо из-за некорректного js кода редактор не встраивается. Если я вставляю такой код editor.setData( ‘post_content); ?>’ );
    то редактор вставляется с html кодом в обычном режиме просмотра, а в режиме «Источник» отображаются преобразованный html код. Вопрос: есть ли способ вставить корректный текст записи, чтобы он правильно отображался и в режиме «исходник»?

    • часть кода php не отобразилась должно быть
      editor.setData ( ‘ post_content ; ? > ‘ ); и
      editor.setData ( ‘ post_content ) ; ? > ‘ ); соответственно

      • Решение оказалось гораздо проще, чем я думал. На самом деле не нужно добавлять данные после того как редактор «появился» на странице, а нужно просто создать textarea с нужным html кодом и при вызове .replace() этот код автоматически вставится в редактор.

  15. Дима:

    Прошу помощи установил CKEditor 3,6 но там нету кнопки для вставки тега more!!!не как прикрутить не получается эту кнопку,помогите пожалуйста!

    • ETNO:

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

  16. Дима:

    И почему то в опере нормально а в мазиле и эксплоере ошибка:
    Error: CKEditor not found.
    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 <head> (line 5) and the «BasePath»‘
    ‘value (line 32).’

  17. zeromanser:

    Здравствуйте, у меня следующий вопрос: возможно ли встроить форму добавления статей на сайт на отдельной странице, а не в виджете. Виджет ставится в сайдбаре, а там очень мало места для редактора. Или что-то не понимаю?

    • ETNO:

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

  18. Добралась до третьей статьи, работа уперлась в проблему с TDO mini forms — плагин не устанавливается на хостинг, в сети много упоминаний про некорректную работу этого плагина (как предполагается по причине несовместимости с новой версией WP).
    У вас все работает?
    Есть ли альтернатива этому плагину?

    • ETNO:

      недавно обновлял один сайт до последней версии и TDO на нем нормально работает. альтернативы есть — gravity forms — еще лучше, но он платный. Был еще какой-то который позволяет пользователям добавлять статьи — community news вроде назывался, как-то так

  19. Да, плагин встал нормально. http://fleek.org/fleekaj/WBVNEgxMS08RT0pDCRdLWFIbD0g=/
    Возникла проблема с появлением вместо аватарки части кода.
    В общем, на данный момент поняла, что лучше заплатить веб-мастеру, и он все решит)
    Спасибо за ответ!

    • ETNO:

      а точно тот код вставляли? Я вот недавно обновил сайт где стоял этот код до последней версии — и все нормально работает, значит дело не в совместимости, как я раньше думал. Может кавычки неправильные где-то?

  20. Социальная сеть на WordPress?) Это интересно) Он разве позволяет такое делать? Я думала это чисто блогосистема…

    • ETNO:

      wp все позволяет. Описаный способ — это конечно не полноценная соц сеть, это так, небольшие функции сети для блога. Нужна сеть — можете юзать buddypress — это плагин для wp. Но если нужна многофункциональная сеть, то лучше смотреть в сторону других движков, например livestreet

  21. Доброго времени суток!
    У меня что то не сходится с моим шаблоном вставляю виджет и начинаются глюки
    Автор плиз напишите мне на почту,
    нужна помощь по еще некоторым вопросам

  22. Здравствуйте, хочу создать форму добавления статьи по Вашему примеру, только tdo mini forms больше нет в репозитории Вордпресс. Можете выслать мне этот плагин на почту, указанную при добавлении этого комментария? Буду очень признателен.

    • ETNO:

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

  23. Спасибо за новую ссылку. Тема вообще актуальная и интересная.

оставить отзыв

Если хотите вставить код в комментарии, то оберните его тегами ‹pre›‹/pre›