タグ: 便利なプラグイン

【Meta Slider】スライドショーの作成

24 7月 17
北川 哲平

No Comments

WordPressのプラグイン「Meta Slider」を使用してスライドショーを作成します。

 

インストール

プラグイン「Meta Slider」をインストールします。

プラグインのインストールは、
プラグインのインストールと有効化」をご覧ください。

スライド画像の設定

①管理画面 > Meta Sliderをクリックします。

 

②「スライドを追加」ボタンをクリックします。

 

③メディアライブラリにある画像から、スライドショーに加えたい画像を選択します。

 

新たにファイルを加えたい場合は、「ファイルをアップロード」タブを選択して、お好みの画像をアップロードしてください。

 

④画像を選択したら「スライダーに追加」ボタンをクリックします。

 

⑤スライドする画像が追加されます。上記②-④の作業をして、スライドを追加してください。

 

⑥スライド画像の大きさを設定します。幅と高さをお好みのサイズに指定します。

 

⑦その他の設定は、お好みで変更します。また高度な設定も利用することができます

 

⑧全てを設定したら、保存をクリックします。

 

⑨ショートコードをメモしておきます。後で、ページに貼り付けます。

 

⑩スライドショーを表示したいページにショートコードを貼り付けます。

 

⑪スライドショーを確認して完成です。

 

尚、ショートコードはテンプレートに貼り付けることも可能です(難易度高)。
その場合は、「使い方」 > 「テンプレートに含める」タグを選択し、コードをテンプレートへ貼り付けてください。

【TinyMCE Aadvanced】記事の投稿・編集時のエディタに便利な機能を付ける(表の作成・動画の挿入等)

31 1月 17
北川 哲平

No Comments

プラグイン「TinyMCE Aadvanced」を導入して、ビジュアルエディタの機能を増やします。
表の作成、動画の挿入などが簡単に行えるようになります。

 

1. 「TinyMCE Aadvanced」をインストールします。

インストール方法は「プラグインのインストールと有効化」をご覧ください。

 

2.「管理画面 > 設定 > TinyMCE Aadvanced」をクリックします。

tinymce_advanced_02

 

3. 「エディターメニューを有効化する。」にチェックが入っていることを確認して下さい。

tinymce_advanced_04
「段落」「B」などのアイコンがあるエリアが、記事・ページ編集時のビジュアルアディタの上部に表示さるツールバーになります。

「使用しないボタン」から使いたいツールがあれば、ドラッグしてツールバーにドロップ。逆にツールバーに不要なアイコンがあれば、「使用しないボタン」にドラッグ&ドロップして下さい。

※ツールバー最上部の「ファイル」「編集」などのメニューは外せません。
しかし、「フォントサイズ」「フォントファミリー」以外のほとんどのツールが入っていますので、設定画面でボタンを網羅せずとも大丈夫です。

※ビジュアルエディターの画面ではアイコンの説明がありませんが、アイコンの上にカーソルを載せると、下の画像の様に説明が出てきます。分からないときはお試しください。
tinymce_advanced_01_c

 

4. 「設定」を施します。

tinymce_advanced_05_2

リストスタイルオプション → リストに付ける黒丸等の記号のスタイルを変更できる。

コンテキストメニュー → 右クリックするとエディタ独自のメニューが出るようになる。

代替リンクダイアログ → tinymce_advanced_05_3をクリックすると、リンク専用のダイアログが開くようになります。

フォントサイズ → ツールバーにある「フォントサイズ」で選択できるサイズ設定を変えます(通常は8pt 10pt 12pt…)

 

5. 「高度なオプション」の「段落タグの保持」にチェックを入れます。

tinymce_advanced_05_4
これは、テキストエディターにソースコードを記述した時、多くの改行を設けたい時に役立つ機能です。
こちらにチェックを入れていない状態ですと、保存時や、右上の「ビジュアル」「テキスト」タブを切り替えた時、文章の改行を意味する<p>や<br />タグが自動で削除されてしまうことがあります。それを防ぐための機能です。

下記は、それぞれ「ビジュアル」「テキスト」タブを切り替えた場合の検証結果です。

<段落タグの保存>にチェックを入れていない時
tinymce_advanced_06

<段落タグの保存>にチェックを入れている時
tinymce_advanced_06_02

 

6. 設定が終わりましたら変更を保存をクリックして終了です。

           

このテンプレートのおすすめ機能

 ★ テーブル(表)作成機能

tinymce_advanced_table01
ツールメニューの「テーブル」かtinymce_advanced_table02アイコンをクリックするとテーブルが作れます。

上の画像のように、マウスを載せるとボックスが青くなります。その分の数のセルがあるテーブルを作成できます。

tinymce_advanced_table03
表にカーソルを載せた状態で「テーブル→表のプロパティ」をクリックすると、ダイアログが開きます。
tinymce_advanced_table04
ここで、枠線の太さ、線や背景の色、文章の配置等を指定することができます。

また、「テーブル→セル→セルのプロパティ」、「テーブル→行→行のプロパティ」でも、背景色や文章の配置など、同様の設定を行うことができます。

tinymce_advanced_table05
セルを2つ以上またがって選択し(画像の青い部分が選択中のセル)「テーブル→セル→セルの結合」を選ぶと、セルを結合させることができます。
分割も同じように出来ます。

表そのものを削除したいときは、必ず「テーブル→表を削除」をクリックして下さい。
「バックスペース」キーを押しても消えないので、注意して下さい。

 

 ★ 動画の埋め込み

動画の埋め込みをビジュアルエディターから行えます。
htmlコードなどを見ながら埋め込む場所を探すなどしなくて済むので、記事の投稿もストレスレスになります。

tinymce_advanced_08
▲動画の挿入は「挿入→動画を挿入/編集」から行えます。

tinymce_advanced_0802
▲「一般」タブでは、ソースに動画のURLを、サイズに任意の数値を入れます。
▲動画の埋め込みコードが有る場合は、「埋め込む」タブの所にペーストしてください。
それぞれ上記の方法で記入し「OK」をクリックすれば、動画が埋め込まれます。

 

 ★ テキストの背景色・フォントサイズ・フォントファミリーの変更

WordPressの標準エディタには、テキストの色を変えたり、太字、斜体へ書式を変えることができます。
しかし、フォントや文字の大きさを変えたり、文字の背景に色を敷いてマーカーの様に見せるなどの効果を加えることは出来ませんでした。
プラグイン「TinyMCE Aadvanced」にはそれらの機能も備わっています。


テキストの背景色やフォントサイズの変更方法は、通常の書式設定変更の仕方と同様です。

※フォントファミリーは英字書体のみで日本語書体はありません。バージョンアップにより選べる様になるかもしれませんが、今のところ期待はできません。ご注意下さい。

【WP Maintenance Mode】メンテナンスモードの設定

21 7月 15
北川 哲平

No Comments

WP Maintenance Modeとは?

 
WP Maintenance Modeとは、WordPressを編集する際に、サイトの編集半ばを公開せずに、訪れたお客様に「ただいまメンテナンス中です」などの文章を表示させておくものになります。
こちらのプラグインを有効化しておけば、管理者のアカウントでログインしていない方には「メンテナンス中」の表示を、ログインしている方には「編集途中のサイトの状態」を表示することが出来ます。
 
●WP Maintenance Mode 公式サイト
httpss://wordpress.org/plugins/wp-maintenance-mode/
 
1.WP Maintenance Modeの有効化
2.WP Maintenance Modeの設定
3.WP Maintenance Modeの無効化

 

 

メンテナンスモードの有効化

 
①それでは管理画面の「プラグイン」メニューの中にある「新規追加」メニューをクリックして下さい。
 
新規追加


②「プラグインのインストール」画面が表示されますので検索ボックスに「WP Maintenance Mode」と入力してプラグインの検索を行って下さい。
 
プラグインの検索


③WP Maintenance Modeプラグインが見つかりましたら「いますぐインストール」と書かれたリンクをクリックして下さい。
 
いますぐインストール


④WP Maintenance Modeプラグインのインストールが完了します。次に有効化を行います。
インストール完了後の画面に表示されている「プラグインを有効化」と書かれたリンクをクリックして下さい。
 
プラグインを有効化


⑤WP Maintenance Modeプラグインの有効化が完了します。これで準備は完了です。
 
準備完了


 

 

 

WP Maintenance Modeの設定

 
①それでは管理画面の「設定」メニューの中にある「WP Maintenance Mode」メニューをクリックして下さい。
 
メニューのクリック


②「WP Maintenance Mode」画面が表示されます。
 
画面の表示


③メンテナンス表示をを有効にするにはまず「Activated」を選択して下さい。
 
Activated


④設定が終わりましたら画面左下の「Save settings」ボタンをクリックして変更を反映させて下さい。
 
変更の反映


⑤次に「Design」タブをクリックして下さい。
 
Design


⑥「Title (HTML tag)」「Heading」「Text」の項目の内容を入力します。
 
内容入力


⑦設定が終わりましたら画面左下の「Save settings」ボタンをクリックして変更を反映させて下さい。
 
変更の反映


⑧それではログアウトをしてホームページを表示してみて下さい。
メンテナンス中の画面が表示されます。
 
メンテナンス中画面


 

 

 

メンテナンスモードの無効化

 
①それでは管理画面の「設定」メニューの中にある「WP Maintenance Mode」メニューをクリックして下さい。
 
WP Maintenance Modeメニュー


②「WP Maintenance Mode」画面が表示されます。
 
WP Maintenance Mode


③メンテナンス表示をを無効にするにはまず「Deactivated」を選択して下さい。
 
Deactivated


④設定が終わりましたら画面左下の「Save settings」ボタンをクリックして変更を反映させて下さい。
 
変更の反映


⑤それではログアウトをしてホームページを表示してみて下さい。
メンテナンス中の画面が表示されません。
 
画面確認