マウスポイント時に行がハイライト表示する表

スタイルシートでhoverを利用して作成しています。

#highlight{
width:600px;
color : black;
line-height : 1.3;
}
#highlight td{
padding : 10px 5px;
background-color : white;
border:1px solid darkgreen;
font-size:14px;
color : black;
line-height : 1.5;
}
#hi-title{
width:110px;
font-size:14px;
text-indent : 10pt;
}
#highlight tr:hover td{
background: darkgreen;
color: white;
}

htmlファイルの実装側はこんな感じです。

<table id="highlight">
<tbody>
<tr>
<td id="hi-title">2の倍数</td>
<td>1の位が0,2,4,6,8の偶数</td>
</tr>
</tbody>
</table>

見本:こんな感じ


ヘッダー画像をスライドするプラグイン:Header Image Slider

〔外観〕→〔ヘッダー〕の画像でスライダーができる

1枚の画像、もしくは複数の画像をランダム表示させることしか
出来ないデフォルトの選択画面に、
Slider項目が増える。
簡単に使える優れもの!

『Header Image Slider』をインストールして有効化して使う。

参考ページ:http://naitoisao.com/1395.html


フワリと表示されるFAQ:Q & A FAQ and Knowledge Base

  1. プラグイン新規追加で「Q & A FAQ and Knowledge Base」を検索
  2. いつも通りインスールして有効化
  3. 管理メニューにFAQsが表示される
  4. カテゴリー毎にまとめて表示するので、まずは、【FAQ Categories】でカテゴリーを登録する
  5. 新規追加で記事を書く。タイトルをクリックするとふわりと内容が表示される関係にある
  6. FAQsを表示させたい場所に以下のコードを記述する
    [qa cat=”カテゴリーのスラッグ名”]
  7. 表示方法などをカスタマイズしたいときは、[plugins/q-and-a]にスタイルシートファイルがあるのでそこをいじる

<カスタマイズ>
●Posted in: を非表示にした
【FILE】inc/function.php

function add_categories_to_single ($content) {
global $post;
$faq_cats = qa_add_categories();
if ( is_single() &amp;&amp; 'qa_faqs' == get_post_type($post) &amp;&amp; !empty( $faq_cats ) ) {
/* $qa_cats = '
<p class="qa_cats">' . __('Posted in: ', 'qa-free') . $faq_cats . '';*/
/* $content = $content . $qa_cats; */
return $content;
} else {
return $content;
}
}

●スタイル変更:answerに背景色を付けた。カテゴリ名とタイトル名の文字の大きさを指定
【FILE】wp-content/plugin/q-and-a/css/q-a-plus.css

/* answer box */
.collapsible .qa-faq-answer {
display: none;
background: aliceblue; /* add */
}
.qa-category h2{
font-size: 15px;
}
.qa-faq-anchor{
font-size: 15px;
}

●個別のテーマのみに反映させたい場合:テーマ内のスタイルシートファイルにコードを記述する
(ID・クラス名が同じ場合、後から読み込まれた方が上書きしていく。テーマcssの方が後に読み込まれる)
【FILE】wp-content/themes/palmixio/css/custom.css

/* plugin q-and-a custom */
/* size of category and title */
.qa-category h2{
font-size: 15px;
}
.qa-faq-anchor{
font-size: 15px;
}
/* answer box */
.collapsible .qa-faq-answer {
display: none;
background: aliceblue; /* add */
}

ファビコンの作成

  1. Illustrator等で16×16の図をかき、JPGまたはPNGで保存する
  2. FavIcon from Pics(変換サイト)にて、Favicon形式に変換する
    ※ファイルを指定して変換後、圧縮ファイルをダウンロードして解凍する
  3. 解凍したファビコンをサーバーにアップロードする
    (ここでは、imagesフォルダの中に保存)
  4. ヘッダが記述してあるファイルの<HEAD> ~ </HEAD> 内に、LINKタグを設定する
    href="/images/favicon.ico">
    

参考サイト:お気に入りアイコン(ファビコン)の作り方


ファイルダウンロード:WordPress Download Manager

参考URL:ファイルのダウンロード機能を追加

WordPress Download Managerアドオンを活用しよう!

【Advanced TinyMCE
編集画面にアイコンが表示されてショートコードを簡単に挿入できるようになるアドオン。

【WPDM Button Templateボタン装飾アドオン】
アドオンファイルを有効化し、専用のショートコードを記述してボタンに装飾。

[wpdm_button_template id=package-id style="style-name" align="alignment"]
  • style = light | green | blue | lightblue | xmas | instagram | coffee
  • align = left | center | right

ソースコード表示:Syntax Highlighter for WordPress

Syntax Highlighter for WordPress 3.0.83.3

ソースコードをWebサイトに見やすく表示してくれるソースビューア

  1. Syntax Highlighter for WordPress:Download ダウンロード
  2. 解凍したディレクトリを[plugins]にアップロード
  3. WordPressの管理画面からSyntax Highlighter for WordPressを有効にする
  4. ソースコードの前後に[言語]と[/言語]を記述すれば自動的に整形してくれる
  5. 管理画面の設定でソースコードの表示方法を指定することができる

ショートコードオプション(使うものだけ抜粋)

  • 行の開始番号指定 num=80
  • ハイライト表示 highlight_lines=”1,15,30″

ショートコードを表示するとき・・・ [ ] で囲むと表示される

[[browser-shot url="http://yoshiming.com" width="400"]]

[browser-shot url="http://yoshiming.com" width="400"]

参考サイト
http://wppluginsj.sourceforge.jp/syntax-highlighter/


ソーシャルボタンの設置:WP Social Bookmarking Light

  1. 「WP Social Bookmarking Light」をインストールして有効化する
  2. 各サイトの管理メニューの【設定】に【WP Social Bookmarking Light】が表示される
  3. 必要なソーシャルボタンを選んでボタンのオプション設定をする
    ※facebook のLocaleにはja_JPと入力する
  4. 【一般設定】でどのページのどの位置に表示するか設定する
  5. 目的のテンプレートに表示させたい場合は次のコートを記述する
    <?php if(function_exists("wp_social_bookmarking_light_output_e")){wp_social_bookmarking_light_output_e();}?>
    

※マルチサイトの場合は、Pluginを有効にすると全サイトにソーシャルボタンが設置されてしまうので必要に応じて設定したり削除したりする必要がある。

ボタンの表示・非表示を記事ごとに振り分ける
投稿記事:single.phpに以下の条件を入れる

if ( in_category('15') ) {
---
}
else{}

固定ページ:page.phpに以下の条件を入れる


ページごとに条件分岐するコードの書き方:参考にしたページ


サイトマップ:ps-auto-sitemap

【サイトマップ表示】
1.インストール
2.サイトマップ用の固定ページを新規作成
3.以下のコードを記述


4.サイトマップ用のページIDを調べて管理画面の【PS Auto Sitemap】の設定の「サイトマップを表示する記事」の所に入力する

【デザイン】
●各ページに設定した『順序』の順番でサイトマップが表示される
●表示したくないページは『ページID』を設定画面で指定しておく
●設定の「スタイルの変更」でスタイルを決める
自分で作成してもいいが、付箋、矢印、ビジネス、索引あたりは見やすい

[参考文献] http://wp-exp.com/blog/ps-auto-sitemap/


コピぺ文字に一括でふりがなをつける方法

ふりがなを表示するPHONETIC関数は、手入力のみ対応。
コピペした文字には対応していない。

コピペ対応にするためには、selection.setphonetic コードを利用する。

マクロを作って実行するか、
イミディエイトウィンドウ(Alt+F11キーで表示)を利用する。

マクロの場合のコード
===================
Sub ふりがな()
Selection.SetPhonetic
End Sub

参考文献:http://oshiete.goo.ne.jp/qa/6267930.html


カスタム投稿タイプ:Custom Post Type UI

Custom Post Type UI(0.7.2)

カスタム投稿タイプで投稿(ブログ)とは別に投稿ページを管理することができる。

カスタム投稿タイプ :Custom Post Type 投稿ページの総称名(「投稿」に相当)
カスタム分類 :Cutsom Taxologies カスタム投稿ページを分類するための総称名(カテゴリーに相当)
(例)投稿タイプ:WordPress 分類:WPCategory
[Add New]でそれぞれを作成してから、ページを作成する。階層Trueにしておくと良い。

<ページの表示方法>

  1. 新規メニューを作成して、カスタム分類をメニューに追加してから、
    ウィジェットでサイドバーに表示する
  2. プラグインCustom Post Type List Widgetを利用する

<表示の際のテンプレートファイル>

  • カスタム投稿ページ
  1. single-$posttype.php
  2. single.php
  3. index.php
  • カスタムタクソノミーアーカイブページ
  1. taxonomy-$taxonomy(-$term).php
  2. taxonomy.php
  3. archive.php
  4. index.php
  • カスタム投稿アーカイブ
  1. archive-$posttype.php
  2. archive.php
  3. index.php

参考文献:Custom Post Type UIでカスタム投稿を作って・・・


カスタム投稿タイプ記事の並べ替え:Custom Post Order

  1. Custom Post Order 2.2 ダウンロード→有効化
  2. 管理画面の[Post Order]から記事を並べ替える

カスタム投稿記事のアーカイブ表示ができなくなった

→ 管理画面の[Post Types]で対象となるカスタム投稿タイプのチェックを入れたら直った

プラグインを更新したらカスタム投稿記事のアーカイブ表示ができなくなった

→ 管理画面の[Manage Post Types]-[Edit Post Types]のビルトイン分類の設定で対象となるカスタム投稿タイプのチェックを入れたら直った


カスタム投稿タイプのアーカイブ表示で抜粋文を出力する

1. カスタム投稿タイプのアーカイブ表示の際、各記事の抜粋文を出力する

taxonomy.php (普通の投稿のときは、archive.php )で記事表示のテンプレートファイルを指定し直す


get_template_part( 'content-archive', get_post_format() );

 

2.content.phpをコピーしてcontent-archive.phpを作成して修正する

(余分なところをコメントアウト)


<?php// if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php// else : ?>
<div class="entry-content post_content">
<?php// the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'citizen-journal' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'citizen-journal' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php// endif; ?>

 

抜粋文がない場合は、本文の最初の110文字が表示される。


ウィジェットに画像を設定する:Image Widget

  1. Image Widget(ver 4.0.4) インストールと有効化
  2. 管理画面のウィジェットに【Image Widget】が追加される
  3. サイドバーなどにセットして使用する

【デザイン】
画像に枠線が付くときは、cssファイルに以下を書き込む

#right-sidebar .widget img {
	border: none;
}

インストール@マルチサイト

  1. ドメイン取得・・・ムームードメイン
  2. サーバーにユーザー専用ページにLOGIN・・・ロリポップ!
  3. ロリポップの簡単インストールでWORDPRESSのインストールを開始
  4. DBを新規作成。DBパスワードなど大切な情報は印刷して厳重に保管!
  5. マルチサイト設定(FTP)
    wp-config.php の「編集が必要なのはここまでです!・・・」の上に以下のコードを加え、
    define (‘WP_ALLOW_MULTISITE’, true);
    Unicode(UTF-8)で上書き保存
  6. wp-adminでログインしてネットワークを作成
    サブディレクトリを選択・・・サブドメインより管理が楽
    wp-config.php.htacessを説明に従って書き換える
    ※Unicode(UTF-8)で上書き保存
  7. 再ログインして、参加サイトに「ネットワーク管理者」が表示されたら成功

イラレ⇒PDF⇒A4ジャスト印刷

1.イラレからPDFに変換して保存する際の設定
・Adobe PDFプリセット[PDF/x-1a:2001]
・互換 Acrobat5(PDF1.4)
・裁ち落としなし

2.PDFで印刷する際の設定
・プリンタ側:ふちなし全面印刷、はみ出し量ゼロ
・PDF印刷設定側:ページの拡大/縮小なし・中央配置


アーカイブにアイキャッチ画像を表示させる(Photograph)

テキスト表示だけだったアーカイブにアイキャッチ画像を表示させる

Before After
archive-before archive-after

 

  1. archive.phpを修正
    追加コード・・・the_post_thubnail()関数, id:b-thumbnail,b-title,text-boxの指定

    <a title="Permanent Link to&lt;br /&gt;
    &lt;?php the_title_attribute(); ?&gt;" href="&lt;?php the_permalink() ?&gt;" rel="bookmark"><!--?php /* アイキャッチ画像を表示 サイズと位置指定 */ ?-->
    <span id="b-thumbnail">
    <!--?php the_post_thumbnail( array(150,150), array('class' =--> 'imgLeft') ); ?&gt;</span>
    <p id="b-title"></p>
    
    </a>&nbsp;
    
    ・・・中略・・・
    <div id="text-box"></div>
    
  2. custom.cssにコード追加
    #text-box{
    display:block;
    height:100px;
    margin-left:160px;
    font-size: 12px;
    }
    #b-title a{
    font-size:16px;
    color:powderblue;
    }
    #b-thumbnail{
    float: left; /* テキストの回り込み可にする */
    margin: 0 10px 0 5px;
    }
    

アクセス解析:Google Analyticator

googleのサーバ上でアクセスログの記録や解析をしてくれるGoogle Analytics。

色んな解析プラグインがあるけど、自サイトのサーバ上でアクセス解析をするものは、
負荷がかかるし、ログが増え続けたら困るのでgoogleさんのものを利用したい。

参照:<a href=”http://www.netyasun.com/master/google.analytics.html” target=”_blank”>Google Analytics アクセス解析</a>


アイキャッチ(サムネイル)画像を使う方法

function.phpに以下のコードを追加すると、
新規投稿の画面にアイキャッチ画像と投稿するところが追加されます

add_theme_support('post-thumbnails');

投稿ページにアイキャッチ画像を表示するときは、
single.phpなどのwordpressループ内で以下のコードを記述する。

<!--?php the_post_thumbnail('msize'); ?-->

サイズを指定したいときは、function.phpに以下のコードを追加する

add_theme_support('post-thumbnails');
set_post_thumbnail_size(横,縦);
add_image_size('msize', 260, 260);

参考ページ:wordpressでアイキャッチ(サムネイル)画像を使う方法


すぐに入れよう:AkismetとMultibytePach

まず最初にいれるべきプラグイン ※標準搭載されている

  • Akismet(2.5.7):コメント投稿等のスパムからブログを守る APIキーを入手して設定を更新する
  • WP Multibyte Patch(1.6.4):日本語版WordPressで日本語の処理を修正・強化をする

一応、これもあったので入れておく。

  • Contact Form 7(3.3.2):お問い合わせフォーム用

YouTubeなどの映像を貼りつける:Viper’s Video Quicktags

  1. Viper’s Video Quicktagsダウンロード&有効化
  2. ページ作成画面に動画挿入のクイックタグボタンが追加されるので利用して作成
  3. 【管理画面】-【設定】-【Video Quicktags】で設定条件を変更できる・・・YouTubeの場合、プレイヤーのサイズ、枠の色、動画の再生方法など

WP Download Maneger:ファイルのダウンロード機能

参考文献:http://wp-school.info/plugin-downloadmanager

ダウンロードファイルごとにパスワードを設定することができる

ファイルごとにパスワードをかけずに、ダウンロードファイルを複数並べたページにパスワードをかけたい場合
1.DownloadManagerで作成したページを非表示にすると直接の閲覧できなくなるが参照ページからは閲覧ができる。
※DownloadManagerの保護設定があまいだけかも知れない
※公開したときにしかDMのアイコンが使えないので要注意
2.検索からもファイルを選ぶことはできない
3.downloadページからも非表示のファイルは表示されない

 

見た目が気になるのでカスタマイズをしたい。
CSSファイルをいじる前にフリーのプラグインがあるのでそちらを調査中


Webサイトにパスワードを設定する:Password Protected

Webサイト全体にパスワードを設定するプラグイン。

マルチサイトの場合は、各サイト毎に設定することができる。

  1. ネットワーク管理者のプラグイン新規追加で、【Password Protected】をダウンロード
  2. 各サイトの設定メニューに【Password Protected】が追加されているので、そこでパスワードの設定をする

【特徴】

  • 閲覧にパスワード制限をかけるだけなので、メールアドレスやアカウントが不要でお手軽。
  • ページやカテゴリーごとにアクセス制限をかけることはできない。

~ログイン画面のカスタマイズ~

【FILE】/wp-content/plugin/password-protected/theme/login.php
【画像ファイル】/wp-content/plugin/password-protected/theme/ei.jpg

※サイト別に変更を加えたいときは、各テーマのフォルダにこのファイルを入れる。

new version・・・テーマ別、ロゴの変更と文字の挿入


<center>
<img src="<?php bloginfo('template_url'); ?>/donut.png" width="150px" height="150px">
</center>

<?php /*
<h1><a href="<?php echo esc_url( apply_filters( 'password_protected_login_headerurl', home_url( '/' ) ) ); ?>" title="<?php echo esc_attr( apply_filters( 'password_protected_login_headertitle', get_bloginfo( 'name' ) ) ); ?>">
bloginfo( 'name' );?></a></h1> */ ?>
<h1><?php _e('Doraforma Japan'); ?></h1>
<?php do_action( 'password_protected_login_messages' ); ?>
<?php do_action( 'password_protected_before_login_form' ); ?>

old version・・・全体、画像の変更と文字の挿入


<form name="loginform" id="loginform" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="post">

<p><center>
<?php _e('Sorry !!! <br>こどもの写真なのでパスワードかけてます。<BR>','yoshimi'); ?><br><br>
<img src="<?php echo esc_url( home_url( '/' ) ); ?>/wp-content/plugins/password-protected/theme/ei.jpg" width=130 height=130><br><br>
<label for="password_protected_pass"><?php _e( 'Password', 'password-protected' ) ?><br />
<input type="password" name="password_protected_pwd" id="password_protected_pass" class="input" value="" size="20" tabindex="20" /></label></center>
</p>

<!--
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90"<?php checked( ! empty( $_POST['rememberme'] ) ); ?> /> <?php esc_attr_e( 'Remember Me', 'password-protected' ); ?></label></p>
-->
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Log In', 'password-protected' ); ?>" tabindex="100" />
<input type="hidden" name="testcookie" value="1" />
<input type="hidden" name="password-protected" value="login" />
<input type="hidden" name="redirect_to" value="<?php echo esc_attr( $_REQUEST['redirect_to'] ); ?>" />
</p>
<p><center>
<?php _e('<br><br><br><br>知り合いの方にはパスワードお伝えしますので、<br>是非ご一報下さい。<br><br>そしてご覧下さい。<br><br>by YOSHIMI','yoshimi'); ?></center>

</form>


Subscribe2:メルマガ配信

インストールして有効化したら以下のメッセージが現れる
Subscribe2 cannot be activated as a network plugin. Please activate it on a site level
マルチサイトだったので各サイトでこのプラグインを有効化すればよい

日本語化する⇒Subscribe2 日本語化ファイルがダウンロードできるサイト
plugin-Subscribe2のフォルダにsubscribe2-ja.moをアップロードする

注意:メルマガ登録画面は管理者ログインの状態だと表示されないので、確認したいときはログアウトをする

参考文献:ファイルのダウンロード機能を追加「WordPress Download Manager」