ひろゆき

Follow@LIG_J

2015.04.20

WordPressの管理画面にPDFマニュアルを埋め込んで、運営コストを削減しよう

こんにちは。ひろゆきです。

今日はWordPressマニュアルを管理画面に埋め込んだときの覚書です。もちろん、使い方次第ではこれを応用して色々なものを埋め込めると思います！

なぜマニュアルを埋め込むのか

WordPressでサイトを構築する際に、利用者向けにマニュアルを作ることはよくありますね。特に利用者がWordPressを初めて使う場合や、複雑にカスタマイズされたWordPressを使ってもらう場合に役立ちます。

そんなマニュアルですが、バージョンが変わるごとにメールで送ったりしていると管理が煩雑になることがあると思います。
そこで、マニュアルを管理画面に埋め込んでしまえば、利用者はマニュアルの管理から開放され、制作者もサーバーにアップすれば良いだけとなり、一石二鳥というわけです。

マニュアルを管理画面に埋め込む手順

それでは早速、マニュアルを埋め込んでみましょう。

1. マニュアルを作成する

まずは埋め込むためのマニュアルを作成しましょう。
今回はPDFを埋め込みますので、PDF形式で保存してください。

2. 管理画面にマニュアル用のメニューを追加する

まずはこのようなかたちで、管理画面のメニューの中に「マニュアル」という項目を生成します。生成するには以下をfunctions.phpに記述します。

メニューを追加するための記述

//メニューに追加する
add_action ( 'admin_menu', 'artist_add_pages' );
function artist_add_pages () {
	add_menu_page('マニュアル', 'マニュアル', 'manage_options', 'manual', 'manual');
}

これで、管理画面に「マニュアル」というメニューが表示されます。

3. リンクを書き換える

本来、上記の手順でメニューを追加する場合、詳細ページもセットで考えますが、今回はPDFを直接開きたいのでそのようにHTMLを書き換えます。

生成されたメニューのHTML

<li class="wp-not-current-submenu menu-top menu-icon-generic toplevel_page_manual menu-top-first" id="toplevel_page_manual">
<a href="admin.php?page=manual" class="wp-not-current-submenu menu-top menu-icon-generic toplevel_page_manual menu-top-first">
<div class="wp-menu-arrow"><div></div></div>
<div class="wp-menu-image dashicons-before dashicons-admin-generic"><br></div><div class="wp-menu-name">マニュアル</div>
</a>
</li>

hrefの中身をPDFのURLに書き換え、別ウィンドウで開くようにtarget=”_blank”を付け加えます。以下が、その記述です。

hrefとtargetをJavaScriptで書き換える記述

/**
 * メニューのリンクurlを書き換える
 *
 */
function add_side_menu_manual() {
	//pdfのurlを設定
	$pdf_url = get_bloginfo('template_directory') . '/images/test.pdf';
	?>
	<script type="text/javascript">
		jQuery( function( $ ) {
			$ ("#toplevel_page_manual a").attr("href","<?php echo $pdf_url; ?>"); //hrefを書き換える
			$ ("#toplevel_page_manual a").attr("target","_blank"); //target blankを追加する
		} );
	</script>
<?php
}
add_action('admin_footer', 'add_side_menu_manual');

これで、PDFリンクの設置が完了しました。