これを見た方はこんなページも見ています・・・を表示するプラグイン
Where did they go from here?
日本語版：
日本語訳：http://welcustom.net/where-did-they-go-from-here/
参考ページ：http://mono.3samurai.com/?p=635（日本語化についても記述あり）
使い方はこのページにありhttp://blog.gti.jp/post-3067
モバイルサイト作成：Ktai Style
トップページ:index.php
参考URL：http://wordpress.siyouyo.com/plugin/1538/
iphoneに携帯テーマを適用するとエラーが出てしまう
Opening and Ending ====
Default 2.0.0 : IKEDA Yuriko 作 に変えたら、きれいに表示されました。
参考URL：http://www.wordpressdehp.com/article/284927997.html
マウスポイント時に行がハイライト表示する表
スタイルシートで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
〔外観〕→〔ヘッダー〕の画像でスライダーができる
１枚の画像、もしくは複数の画像をランダム表示させることしか
出来ないデフォルトの選択画面に、
Slider項目が増える。
簡単に使える優れもの！
『Header Image Slider』をインストールして有効化して使う。
参考ページ：http://naitoisao.com/1395.html
フワリと表示されるFAQ：Q & A FAQ and Knowledge Base
- プラグイン新規追加で「Q & A FAQ and Knowledge Base」を検索
- いつも通りインスールして有効化
- 管理メニューにFAQsが表示される
- カテゴリー毎にまとめて表示するので、まずは、【FAQ Categories】でカテゴリーを登録する
- 新規追加で記事を書く。タイトルをクリックするとふわりと内容が表示される関係にある
- FAQｓを表示させたい場所に以下のコードを記述する
[qa cat=”カテゴリーのスラッグ名”] - 表示方法などをカスタマイズしたいときは、[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() && 'qa_faqs' == get_post_type($post) && !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 */
}
ファビコンの作成
- Illustrator等で16×16の図をかき、JPGまたはPNGで保存する
- FavIcon from Pics（変換サイト）にて、Favicon形式に変換する
※ファイルを指定して変換後、圧縮ファイルをダウンロードして解凍する - 解凍したファビコンをサーバーにアップロードする
（ここでは、imagesフォルダの中に保存） - ヘッダが記述してあるファイルの<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
ドラッグせずに連続コピーする方法
今までかなり苦労していたけど、こういう方法があったとは！
連続データを表の最終行までやるには、ジャンプとフィルを利用する
【参考文献】http://office-qa.com/Excel/ex59.htm
ソースコード表示：Syntax Highlighter for WordPress
Syntax Highlighter for WordPresｓ 3.0.83.3
ソースコードをWebサイトに見やすく表示してくれるソースビューア
- Syntax Highlighter for WordPress:Download ダウンロード
- 解凍したディレクトリを[plugins]にアップロード
- WordPressの管理画面からSyntax Highlighter for WordPressを有効にする
- ソースコードの前後に[言語]と[/言語]を記述すれば自動的に整形してくれる
- 管理画面の設定でソースコードの表示方法を指定することができる
ショートコードオプション（使うものだけ抜粋）
- 行の開始番号指定 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
- 「WP Social Bookmarking Light」をインストールして有効化する
- 各サイトの管理メニューの【設定】に【WP Social Bookmarking Light】が表示される
- 必要なソーシャルボタンを選んでボタンのオプション設定をする
※facebook のLocaleにはja_JPと入力する - 【一般設定】でどのページのどの位置に表示するか設定する
- 目的のテンプレートに表示させたい場合は次のコートを記述する
<?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に以下の条件を入れる
ページごとに条件分岐するコードの書き方：参考にしたページ
スライドショー：Meteor Slides
Meteor Slides 1.5.1
- ネットワーク管理者でMeteor Slides 1.5.1をインストールして有効化する
- 日本語で利用するために、次のようにファイル名を変更する
languages/meteor-slides-ja_JA.m0
↓
languages/meteor-slides-ja.mo - 管理画面に[スライド]と表示される
[参考URL]
http://design-plus1.com/tcd-w/2012/09/meteor_slides.html
システム文字の変更
システム文字が気に入らないので変更したい
ダウンロード先からダウンロード後、実行ファイルを開き、Meiryo UI 9ptに変えました。
今まで通りの文字になり、しっくりしたー(^^)
参照HP：Windows10のフォントを変更
ダウンロード先：Meiryo UIも大っきらい!!Meiryo UIも大っきらい!!
カスタム投稿タイプ：Custom Post Type UI
Custom Post Type UI(0.7.2)
カスタム投稿タイプで投稿（ブログ）とは別に投稿ページを管理することができる。
カスタム投稿タイプ ：Custom Post Type 投稿ページの総称名（「投稿」に相当）
カスタム分類 ：Cutsom Taxologies カスタム投稿ページを分類するための総称名（カテゴリーに相当）
（例）投稿タイプ：WordPress 分類：WPCategory
[Add New]でそれぞれを作成してから、ページを作成する。階層Ｔｒｕｅにしておくと良い。
＜ページの表示方法＞
- 新規メニューを作成して、カスタム分類をメニューに追加してから、
ウィジェットでサイドバーに表示する - プラグインCustom Post Type List Widgetを利用する
<表示の際のテンプレートファイル>
- カスタム投稿ページ
- single-$posttype.php
- single.php
- index.php
- カスタムタクソノミーアーカイブページ
- taxonomy-$taxonomy(-$term).php
- taxonomy.php
- archive.php
- index.php
- カスタム投稿アーカイブ
- archive-$posttype.php
- archive.php
- index.php
参考文献：Custom Post Type UIでカスタム投稿を作って･･･
カスタム投稿タイプのアーカイブ表示で抜粋文を出力する
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">→</span>', 'citizen-journal' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'citizen-journal' ), 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <?php// endif; ?>
抜粋文がない場合は、本文の最初の110文字が表示される。
インストール@マルチサイト
- ドメイン取得・・・ムームードメイン
- サーバーにユーザー専用ページにLOGIN・・・ロリポップ！
- ロリポップの簡単インストールでWORDPRESSのインストールを開始
- DBを新規作成。DBパスワードなど大切な情報は印刷して厳重に保管！
- マルチサイト設定（FTP）
wp-config.php の「編集が必要なのはここまでです！・・・」の上に以下のコードを加え、
define (‘WP_ALLOW_MULTISITE’, true);
Unicode(UTF-8)で上書き保存 - wp-adminでログインしてネットワークを作成
サブディレクトリを選択・・・サブドメインより管理が楽
wp-config.phpと.htacessを説明に従って書き換える
※Unicode(UTF-8)で上書き保存 - 再ログインして、参加サイトに「ネットワーク管理者」が表示されたら成功
アーカイブにアイキャッチ画像を表示させる（Photograph）
テキスト表示だけだったアーカイブにアイキャッチ画像を表示させる
| Before | After | |
|---|---|---|
 |
→ |  |
- archive.phpを修正
追加コード･･･the_post_thubnail()関数, id:b-thumbnail,b-title,text-boxの指定<a title="Permanent Link to<br /> <?php the_title_attribute(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><!--?php /* アイキャッチ画像を表示 サイズと位置指定 */ ?--> <span id="b-thumbnail"> <!--?php the_post_thumbnail( array(150,150), array('class' =--> 'imgLeft') ); ?></span> <p id="b-title"></p> </a> ・・・中略・・・ <div id="text-box"></div> - 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; }
アイキャッチ（サムネイル）画像を使う方法
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でアイキャッチ（サムネイル）画像を使う方法
WP-Cumulus：タグやカテゴリを3D空間で表示
プラグインのインストール
日本語表示の文字化けを防ぐパッチを入れる tagcloud.swf（上書き）
ダウンロードページはこちら
設定の中にWP-Cumulesが表示されるのでそこで各種設定をする
ウィジェットで表示させる
参考URL：初めてのWordPressカスタマイズ