検索方法を2種類おくーカテゴリ別の検索するサーチフォーム

①サーチフォームの表示形式を変更
searchform.phpを以下の内容に置き換えて
ファイル名をsearchform-category.phpに変更する

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label class="hidden" for="s"><?php _e('Key Word Search'); ?></label>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<p>カテゴリを絞る&nbsp;:&nbsp;<?php wp_dropdown_categories('orderby=name'); ?></p>
<input type="submit" id="searchsubmit" value="検索する" />
</form>
<?php
/**
 * Displays the searchform of the theme.
 *
 * @package The NewsMag
 */
?>
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

<p>category&nbsp;:&nbsp;<?php wp_dropdown_categories( array('show_option_all'=>全てのカテゴリー,'exclude'=>5,1 ,'orderby'=>count,'order'=>DESC)); ?></p>

<label class="hidden" for="s"><?php _e('keyword'); ?></label><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索する" />
</form>
&nbsp;
&nbsp;

実例:selectedタグを外すと過去の検索要素が残る

②サーチ結果を表示するファイルを作成
search.php内容そのままで
search-category.phpとして作成する

③sidebarなど表示したい場所に以下のコードを入れる

<?php get_template_part('searchform-category'); ?>

画像に動きを付ける

アニメーションを付ける

http://creatornote.nakweb.com/wow/

headerに以下のコードを追加





アニメーションを付けたい画像に以下のコードを追加

data-wow-offset=”10″
 要素が表示されてから、アニメーションを開始するまでの距離を指定
・data-wow-delay=”1.0s”
 要素を表示後、指定した秒数遅らせてアニメーションを表示
・data-wow-duration=”1.0s”
 指定した秒数をかけてアニメーションを表示
・data-wow-iteration=”10″
 アニメーションを繰り返す回数を指定

参考https://www.feelbee.jp/web_demo2
参考 アニメの種類https://haniwaman.com/wow/


PDFをページめくりで読めるプラグイン

参考文献

まとめサイト:https://fox-wp.com/best-pdf-plugins-for-wordpress/

PDFイメージジェネレーター:

PDF light viewer:https://sounds-stella.jp/music-creation/archives/4400

flowpapper:https://gungii.com/flowpaper-info
[“f”lipbook pdf=”http://URL.pdf”]

Embed Any Document:https://wp-technique.com/wp-embedpdf/サムネイルが表示されずリンク先が表示されるだけ
見ると変わらない・・・

Simple PDF Viewer:syntax errorにつきインストールできなかった

Google Doc Embedder

 

<iframe src="http://docs.google.com/gview?url=http://www.soumu.go.jp/main_sosiki/joho_tsusin/top/ninshou-law/pdf/law_1.pdf&embedded=true" style="width:522px; height:500px;" frameborder="0"></iframe>

↑このタグの赤字部分を、埋め込みたいPDFやPPTのURLに差し替えて、ブログやサイトへ埋め込めば表示できます。


投稿一括入力:Really Simple CSV Importer

注意点

  • csvファイルをUTF-8で保存。excelではムリなのでgooleのスプレッドシートがおすすめ
  • { }で囲まれている列タイトルはオリジナルの文字を指定する。
    {custom_field}列もそのうちのひとつで、自分で作ったカスタムフィールド名(日本語可)を1行目の列タイトルに指定する。
    複数ある場合は、最終列に追加してかける
  • 本文をhtml文にしてもOK
  • 同じ日に複数投稿あるとき、ページ送りの順番が同日内でぐちゃぐちゃになる。 時間指定で解決 → “2017/06/04 11:10”

作者のページかな?:Really Simple CSV Importer 日本語解説&カスタマイズ例
参考URL:記事をCSVで一括投稿
参考URL:いっぱいあるデータをCSVでいっきにWordPressに入れる方法


設定簡単!スライダー:Meta Slider

テーマ「GREEN EYE」とプラグイン「Meteor Slides」の相性が悪いのか
画像がアップロードできず。
メタスライダーはできた。
使い勝手がシンプルだし複数のスライドも作れる。
日本語には対応していないが使い方サイトは日本語充実。

いつものようにプラグインをインストールして有効化。
詳しくは参考文献で!

参考文献:Meta Slider


記事の人気順表示:WordPress Popular Posts

「WordPress Popular Posts」インストール。
日本語対応とかいてあったが日本語にならなかったので
ここから、日本語化ファイルをダウンロードしました。

表示方法は、
ウィジェットからサイドバーに表示させる

参考HP:http://netaone.com/wp/wordpress-popular-posts/

http://netaone.com/wp/wordpress-popular-posts/

まだデータがありません。

今月の人気記事ランキング

  • カスタム投稿タイプのアーカイブ表示で抜粋文を出力する 662ビュー
  • PDFをページめくりで読めるプラグイン 376ビュー
  • JANコードの数字からバーコード作成 349ビュー
  • Webサイトにパスワードを設定する:Password Protected 225ビュー
  • 会員制サイトのプラグイン比較 206ビュー
  • 投稿記事の評価とランキングができる:WP-PostRatings 199ビュー
  • 天気予報を表示する:WP Weather Hacks 134ビュー
  • 機能付き表の作成:TablePress=トラブル解決あり 119ビュー
  • citizen-journal:サイドバーの行間を詰める 106ビュー
  • Subscribe2:メルマガ配信 96ビュー

  • 機能付き表の作成:TablePress=トラブル解決あり

    参考URL:比較表や一覧表を簡単に。テーブル作成用WPプラグイン「TablePress」

    ダウンロードファイル一覧
    ファイル名日付ファイル
    ダウンロード
    詳細
    操作説明書ver.62015.10.092015年10月の新機能「AAA」の操作説明を加えました
    製品A関連の文献2015.10.08
    製品Aの活用例の記載がある文献です
    操作説明書ver.52014.10.01製品のバージョンアップver.2に対応しています
    操作説明書ver.42014.04.10製品Aの操作説明書です。
    操作説明書ver.32013.10.01製品Aの操作説明書です。QandAを加えました。
    操作説明書ver.22013.04.15製品Aの操作説明書です。新機能「XXX」の操作説明が加わりました。
    製品A入門教室2012.10.102012年9月に行われた製品A入門教室で使用したマニュアル本です。
    操作説明書ver.12012.10.01製品Aの操作説明書です。

    ※検索・ソート機能が使えない!
    【解決】footer.php の中に<?php wp_footer(); ?>がなかったので追加。
    tablepressは、フッター部分にスクリプトを追加するため、このコードがないとスクリプトを記述してくれない。
    【他に調べたこと】
    ・jQuerryが読み込まれていない?header.php の<?php wp-head(); ?>でwordpress内のjQuerryが読み込まれる。
    ・他のプラグインとの相性が悪い?jQuerryを利用するプラグインを一時停止して動くか確認。
    ・tablepressを再インストール:カスタマイズしていなかったので意味はないと思ったけど藁をもすがる思いで。

    参考になったページ:WP-Table Relodedで並び替え(ソート)が出来ない場合の対策

    (一言)以前も検索機能が使えなくてwp-footer();をfooter.phpに加えて解決したことがあった。<script>コードは<head>内に記述すると思い込んでしまうが、実はfotterにも記述できるということを忘れないようにしたい。


    投稿記事の評価とランキングができる:WP-PostRatings

    1. プラグインの新規追加で[WP-PostRatings]をインストールして有効化
    2. 管理画面に[☆Ratings]が表示されるのでそこで各種設定を行う
      基本的な設定:[Ratings Options]
      表示する文の設定:[Ratings Templates]
    3. cssを追加する
      追加するクラス:div.hyouka,  .rating,  .rating span
    4. 画像を[image]フォルダに保存する。画像は以下のモノを使う
      rating
    5. WP-PostRationsを貼りつけたいテンプレートファイルに以下のタグを記述する
      投稿ページの場合:single.php
      カスタム投稿ページの場合:single-$posttype.php

      <div class="hyouka">&nbsp;</div>
      

    参考URL:投稿記事の評価ができるプラグイン-wp-postratings

     


    多機能なスライドショー:Skitter Slideshowとカスタマイズ

    とてもいい!
    一種類しか作れないかも。
    それなら、ヘッダー用などに利用するのがベスト

    テーマファイルに記述

    <!--?php if ( function_exists('show_skitter') ) { show_skitter(); } ?-->
    

    ページに記述

    [skitter]/* [ ]は半角になおす */
    

    テーマGreen Eyeでカスタマイズした記録

    GreenEyeのヘッダー画像の大きさに合わせる
    スタイルシート:plugins/wp-skitter-slideshow/css/skitter.style.css

    .box_skitter {
    position: relative;
    # width: 800px;
    # height: 300px;
    width: 930px;
    height: 400px;
    background: #000;
    }
    

    GreenEyeのヘッダーをスライド用にする
    テンプレートファイル:header.php

    <?php /* Slide Goes Here */ ?>
    <div id="iebanner">
    <div id="iebcontent">
    <div id="iefc">
    <center>
    <?php /* if ( function_exists('show_skitter') ) { show_skitter(); } */ ?></center>
    <?php /* class="ibcon" <?php echo of_get_option ( 'slide-image1-title',    ・・・(いらないところはコメントアウト)   get_template_directory_uri() . '/images/slide-image/1.png'); ?> */ ?>
    </div>
    </div>
    </div>
    

    スライドショー用のスタイルシートをインポートする

    @import url(css/style_ie.css);
    

    Skitter Slideshow 設定

    width:930px
    height:400px
    crop-imageはオフ

    参考URL:スライドショー


    写真にフレームを付ける

    画像に写真風のフレームと影を付ける

    Image0027

    html記述部

    <div id="frame-shadow"><img src="***"></div>
    

    css記述部

    #frame-shadow img{
    border:solid 15px white;
    padding:10px;
    -webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
    -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
    box-shadow: 0 10px 8px -6px #8d8c8c;
    }
    

    borderが認識されず、paddingでごまかしてます。
    別のところでは出来ていたけど、why?


    会員制サイトのプラグイン比較

    こんな会員制サイトを作りたく、比較検討してみます。

    1.会員ごとに限定ページのみアクセス可能なサイトを作りたい。
    ※限定ページ以外は閲覧不可にする。

    2.会員数は10~50

    3.閲覧ページは10以上ありページごとにアクセス権をつけていく。
    ※たとえば会員分のカテゴリーを作りカテゴリーでアクセス制限させる。

    Simple-membership
    http://www.webcreatorbox.com/tech/simple-membership/

    WP-members
    http://yogawa.com/post-3251

    Members only
    http://netaone.com/wp/wordpress-members-site-plugin/

    サイト全体の閲覧をログインユーザーのみに限定させることができる。
    閲覧者がログインしていない場合は、指定したページにリダイレクト(転送)できる
    会員ごとのサイトを作りサイトに入る前にログインを要求する

     


    下枠線だけ破線表示の表

    ノートの罫線だけみたいなこんな表です。

    Name Yoshiming
    Address Yokohama-City Japan
    Tel abc-def-2525

    html記述部

    <table id="simply-table">
    <tbody>
    <tr>
    <td id="simply-title">Name</td>
    <td>Yoshiming</td>
    </tr>
    <tr>
    <td id="simply-title">Address</td>
    <td>Yokohama-City Japan</td>
    </tr>
    <tr>
    <td id="simply-title">Tel</td>
    <td>abc-def-2525</td>
    </tr>
    </tbody>
    </table>
    

    css記述部

    #simply-table{
    width:600px;
    border-style:none;
    background-color:transparent;
    line-height : 2;
    }
    #simply-table td{
    padding : 10px 5px;
    border-bottom:1px dashed gray;
    font-size:14px;
    color : black;
    line-height : 2;
    }
    #simply-title{
    padding :10px 5px 10px 30px;
    width:200px;
    font-size:24px;
    text-indent : 10pt;
    }