logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

Drupal でのブログの作成。FCKeditor、pathauto モジュールを使う。

17/04/2025, by Ivan

今日、ブログを作成するための多くのソリューションがあり、おそらく最も人気があるのは Wordpress でしょう。Wordpress はブログ向けの CMS として位置づけられており、検索エンジンを通じてそうしたブログに関する多くの情報を見つけることができます。しかし、私は同様のブログが Drupal ではより速く動作すると考えています。

新しいブログに Drupal を選んだなら、一緒に構築していきましょう。30 分もかからないはずです。すでに Drupal はインストール済みで、Admin Menu モジュールも有効になっており、もしかするとサイトのテーマですでに何か作業をされたかもしれません。

それでは、新しいブログの構築を始めましょう。そのために必要なものは:

1. Drupal の標準モジュールセットに含まれる Blog モジュールを有効にします。

Drupal module blog

これで「ブログ投稿」を作成できます:

drupal module block blog post

Title と Body フィールドに入力し、「Save」をクリックします:

drupal blog post

投稿が作成され、他のすべての投稿と同様に、site_name/blog/1 で利用できるようになります。新しい投稿がブログの上部に上がってくる様子を見るために、あといくつか投稿を追加してみましょう。

drupal blog all posts

blog/1 へのリンクを、別の Navigation メニュー項目として追加しましょう。管理メニューで、Site Structure - Menus - Menu List に移動し、Navigation を選択して Add link します。各タイトルの前にある十字アイコンでドラッグすることで、メニュー項目の順序を変更できます。

drupal links in menu

また、ブログページをサイトのホームページにしましょう。管理メニューで Site Settings - Site Information に移動します。

site info link

そして「Default front page」フィールドに blog/1 と入力します:

drupal front page

次に必要になるのは、新しい投稿を書いたり既存の投稿を編集したりするための便利なビジュアルエディターです。

2. Drupal への CKEditor のインストール。

ビジュアルエディターをインストールするには、次のモジュールが必要になります:

  • WYSIWYG – さまざまなビジュアルエディター(CKEditor、FCKeditor、jWysiwyg、markItUp、NicEdit、openWYSIWYG、TinyMCE、Whizzywig、WYMeditor、YUI editor)をインストールできます。私は通常 CKEditor を使います。
  • ビジュアルエディター本体は CKEditor からダウンロードします。

おそらく画像アップロード機能も必要になるでしょう。CKEditor はデフォルトではこれをサポートしておらず、有料の CKFinder アドオンの使用を前提としています。画像アップロードには、代わりに IMCE を使います。IMCE はサーバー用のファイルアップローダーです。IMCE をインストールするには、次のモジュールが必要になります:

  • IMCE – アップローダーモジュール本体。
  • IMCE Wysiwyg bridge – CKEditor を IMCE と統合するためのモジュール。

Drupal をダウンロードしてインストールされたのですから、これらのモジュールのインストールは問題ないはずです。それでは始めましょう。

WYSIWYG モジュールを sites/all/modules フォルダーに解凍します(all の中に modules フォルダーがなければ作成します)。

drupal install WYSIWYG

WYSIWYG モジュールを有効にします:

Drupal WYSIWYG module

エディターを動作させるには、それを sites/all/libraries フォルダーにもコピーする必要があります(CKEditor はモジュールではなくビジュアルエディターなので、modules ではなく libraries フォルダーに配置すべき点に注意してください)。

libraries folder drupal

CKEditor を libraries フォルダーにコピーします:

Drupal CKEditor

次に WYSIWYG モジュールの設定に移動します(黒い管理メニューがない場合は、admin menu モジュールをインストールすべきです):

WYSIWYG settings

デフォルトの入力フォーマットを使っている場合、Filtered HTML では CKEditor を使う意味はほとんどありません。ほとんどの HTML タグがフィルタリングで除去されてしまうからです。しかし、CKEditor をすべての入力フォーマットに対して構成することができます。

copy CKEditor

これで、新しいページやストーリーを作成すると、CKEditor を使ってそれを編集できます。すべてのタグと画像を保持するには、Full HTML 入力フォーマットを選択します。

Input formats

Full HTML をデフォルトの入力フォーマットに設定します:

Full HTML default format

話はこれくらいにして――新しいページを作成して CKEditor がどう見えるか見てみましょう:

Drupal CKEditor appearance

CKEditor が動作しています!次に、もっとボタンを追加しましょう。CKEditor の設定に移動してボタンを追加します。

Drupal CKEditor configuration

各入力フォーマットにはそれぞれ独自の FCKeditor 設定がある点に注意してください。ボタンが表示されない場合は、おそらく別のフォーマットに追加してしまっています。

Drupal CKEditor buttons

ボタンを追加したので、別のページを作成して CKEditor の動作をテストしてみましょう:

Drupal CKEditor installed and working

これでテキストを好きなようにスタイリングできます。しかし、記事に画像も追加したいですね。そのために、IMCE と IMCE Wysiwyg bridge モジュールを sites/all/modules にコピーして有効にします。

IMCE

これで WYSIWYG 設定に新しい IMCE ボタンが表示されます――それを有効にします:

IMCE enable

これで CKEditor のツールバーに画像アップロードボタンが表示されます:

IMCE upload images

画像をアップロードしましょう:

Browse Server -> Upload -> Insert file

IMCE image upload

IMCE image upload 3

Drupal image upload 4

OK をクリックすると画像が表示されるはずです――これで本格的なビジュアルエディターが手に入りました:

IMCE image upload 5

3. Pathauto モジュールを使って、投稿用の一意な URL を生成します。

Drupal のディストリビューションには、URL エイリアスを作成できる Path モジュールが含まれています。例えば、ページのアドレスが your_site/node/13/ の場合、このモジュールを使ってそのページに your_site/content/your-page でもアクセスできるようになります。しかし、ページごとに手動でエイリアスを書くのは面倒なので、Pathauto モジュールがこれを自動化します。まず、Pathauto をダウンロードします。

Pathauto には Token モジュールが必要です。これも sites/all/modules にコピーします。一部のモジュールは他のモジュールに依存しています。

管理メニューで Site Structure - Modules に移動し、Pathauto モジュールを有効にします。Drupal は、必要な Path と Token モジュールも有効にするよう促します。

モジュールのインストールに関するスクリーンショットはこれ以上追加しませんでした。前の記事でモジュールのインストールについてすでに扱ったからです。

これで、すべての新しいブログ投稿、ページ、ストーリーには自動的に読みやすい URL が付きます。

ただし、それらはデフォルトではロシア語になっている場合があり、常に望ましいとは限りません。URL 内のロシア語文字を音訳(トランスリタレーション)するには、Pathauto モジュールフォルダー内のファイル名を「i18n-ascii.example.txt」から「i18n-ascii.txt」に変更します。

次に、Path モジュールの設定に移動します。他のモジュールと同様に、Path 設定には 管理メニュー - Site configuration - モジュール別 からアクセスできます。「Aliases」タブに移動します。

Drupal Pathauto settings

「Aliases - Automatic alias settings」セクションで、「Transliterate prior to creating alias」のチェックボックスにチェックを入れます。保存後、すべての URL がラテン文字になります。

Drupal Pathauto configuration

(記事の旧バージョン)Drupal への FCKEditor のインストール(FCKEditor は古くなっているので、CKEditor か別のビジュアルエディターの使用をお勧めします)

FCKeditor は、コードを書かずに HTML マークアップを作成できる無料の WYSIWYG エディターです。外部プログラムなしで、オフィスソフトウェアと同じテキスト操作をサイト上で直接行えます。

そこで、drupal.org から Drupal モジュール FCKeditor を、そして ckeditor.com から FCKeditor 本体をダウンロードする必要があります。ブランド変更に伴い、FCKeditor は新しい WYSIWYG エディター CKEditor へと進化しました。CKEditor のインストールと構成については後で扱いますが、とりあえず FCKeditor をダウンロードしましょう。

アーカイブを展開します。fckeditor という名前の Drupal モジュールフォルダーの中に、もう 1 つ fckeditor フォルダーがあります。ダウンロードした FCKeditor のファイルを、その内側のフォルダーにコピーする必要があります。

組み込みのエディターごとモジュールを modules フォルダーにコピーし、Site Structure – Modules で有効にします。フルジャスティフィケーション(両端揃え)やブラウザ経由の画像アップロードなどの機能が欠けていることに気づくかもしれません。それらが重要でなければ、次の設定はスキップできます。私個人としては、これらの機能なしのブログは想像できないので、FCKeditor を少し構成しましょう。

  • /modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php の 30 行目を false から true に変更します:
    $Config['Enabled'] = true;
  • 34 行目で、'userfiles' を 'files' に短縮します
  • 40 行目で、アップロードされるファイルのルートフォルダーを指定します:
    $Config['UserFilesAbsolutePath'] = '/your_site/public_html/files/';
  • 次の内容で新しい行(41 行目)を追加します:
    require_once "../../../../../filemanager.config.php"
  • モジュールフォルダー内のファイル fckeditor.config.js を見つけます。23 行目に次があります:
    ['JustifyLeft','JustifyCenter','JustifyRight'],

    そして 'JustifyFull' を追加して次のようにします:

    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

さらに、Drupal の settings.php ファイルを編集する必要があるかもしれません。Denwer や別のローカルサーバーを使ってローカルサイトで作業していて、OS が Windows なら、問題はないはずです。Linux やリモートサーバーの場合は、ファイル権限の問題に直面するかもしれません。デフォルトでは、Drupal のインストール後、settings.php は権限 444 に設定されており、読み取り専用になっています。これは例えば Total Commander を使って変更できます:

Drupal FCKEditor file permissions

Drupal FCKEditor permission change

すべてのチェックボックスを選択して権限を 777 に設定し、settings.php の編集を可能にします。このファイルを削除する必要がある場合は、フォルダーの権限も 777 に設定します。

settings.php の編集後は、権限を 444 に戻すのを忘れないでください!

settings.php の 169 行目で、# 記号を削除して行のコメントを解除し、次のようにサイトのドメイン名を指定します:

$cookie_domain = 'site-name.com';

まだ FCKeditor モジュールを有効にしていない場合は、今すぐ有効にします。Site Settings メニューに FCKeditor という新しい項目が表示されるはずです――それをクリックします。

登録ユーザーも FCKeditor を使う場合は、管理メニュー → User Management → Permissions を通じて権限を付与する必要があります。

Drupal FCKEditor permissions

  • Access fckeditor – ユーザーがエディターを使えるようにします。
  • Administer fckeditor – エディターの設定を管理します(管理者のみに有効にすべきです)。
  • Allow fckeditor file uploads – エディター経由でファイルをアップロードする権限。

次に、FCKeditor のアクセス設定を構成します(管理メニュー → Site Settings → FCKeditor)。

Drupal FCKEditor profiles

Default と Advanced のプロファイルを編集して、ブラウザベースの高速なファイルアップロードを有効にします。

Drupal FCKEditor image upload permission

設定を保存します。その後、新しい機能が表示されるはずです:

Drupal FCKEditor justify and image upload

FCKEditor toolbar