WordPress

WordPressのカテゴリーページを記事タイトルの一覧表示にする簡単な方法

コメントする

カテゴリーページに記事一覧を表示する方法

プラグインを使ってWordPressのカテゴリーページを記事タイトルのリスト表示にする。
WordPress 2.6～4.2.xで動作確認済み。

WordPressをブログとしてではなく、アップデート機能のあるWebサイトとして利用する場合は、 カテゴリ内の記事を一覧としてリスト表示したい。

kijiichiran

なので、こんな感じで、記事の抜粋ではなく、タイトルの一覧表示にする方法を紹介する。

プラグインDC Nicer Archvesを使う方法

まずは下記でプラグインをダウンロード。
ここからDC_nicer_archves.zipをダウンロード。

現在のWordPress 3.xx以上には、ダッシュボードからのインストールができないので、FTPを使ってアップロードすることになる。
まずはzipファイルを解凍。
解凍したらDC_nicer_archvesというフォルダができる。
\DC_nicer_archves\wp-content\plugins の中にある nicer_archives.php をサーバのプラグインフォルダに入れる。

そしてダッシュボード管理画面のプラグインの管理画面で「DC’s Nicer archives」を有効にする。

次に
\DC_nicer_archves\wp-content\themes\default の中にあるうち category.php と search.php をサーバ上の現在使っているテーマ内の同じファイルとを入れ替える。元々category.phpがある場合は上書き。（念のためオリジナルはバックアップしておきましょう）。

これでカテゴリーページと検索結果のページは記事タイトルのリスト表示になる。
ちなみにテーマに category.php がない場合は、上書きではなくそのままアップになるがその場合でも有効。

Ajax他, CSS, スマホ・パソコン・Web関連

スマホやSkypeでホームページ上の電話番号の自動リンクを無効化する方法

コメントする

Safariの電話番号自動リンク化機能を無効にする方法

 

<meta name="format-detection" content="telephone=no">

を

<head>
.........中略..........
<meta name="format-detection" content="telephone=no">
.........中略..........
</head>

こんな感じで、headの間に記述するだけでOK。

 
 
 

関連記事：
画像リンクをタップして電話発信するiPhone, AndroidのバナーやボタンをPCで無効にする方法

iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法

Ajax他, スマホ・パソコン・Web関連

iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法

コメントする

スマホページで画像バナーをタップで、電話発信させる方法

 
リンクや画像をタップするだけで電話をかけることができる機能がある。
SafariやSkypeをインストールしている場合、普通の電話番号をリンクにする機能がある。
この機能には色々と問題点があるので、それをクリアしていこう。
 

従来の方法の問題点

<a href="tel:xxxxxx"></a>

 
01-0000-0000
と、リンクにしておくと、タップ（クリックすると）
tel-tap-to-submit
 
こんな感じのダイアログが出てきて通話ができる機能だ。
 
しかし、このリンクをPCでクリックしてしまうと、
 
tel-link-error
 
こんな感じのエラーが出てきて嫌な感じになる。
 
これを解決する方法はいくつがあるが、iPhoneだけでなくAndroidにも対応する方法を紹介する。
 

<span>を使って、PCの時にリンクにならないようにする方法

 
まず、HTMLファイルの電話のリンクにしたい部分を

<span class="tel-link">01-0000-0000</span>

 
と記述する。
 
これは、span なので、当然リンクにならない。PCでクリックしても何も起こらない。
 
スマホの時にこれをリンクに書き換える必要があるので、
 
jsファイルに

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
        $('.tel-link').each(function(){
            var str = $(this).text();
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }
});

と書いておく。
 
分からなければ、ここから右クリックして「リンク先を保存(言葉違う可能性あり)」tel-link.jsをダウンロードしよう。
 
あと、jQueryが必要なので。こちらもダウンロードしておこう。既に導入済みの場合は新たにアップロードする必用はない。
jquery-1.11.3.min.js
 

HTMLファイルにjsファイルを読み込ませる記述

 

<head>
.......中略......
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/tel-link.js"></script>
</head>

 
という感じで、

<span class="tel-link">01-0000-0000</span>

と記述したHTMLファイルのheadの間に記述。

 

jsファイルをアップロードして搭載

 
jquery-1.11.3.min.js
tel-link.js
HTMLファイル
 
上記3つをサーバーにアップロードする。
 
 
完了。
 
 
 

関連記事：
スマホやSkypeでホームページ上の電話番号の自動リンクを無効化する方法

画像リンクをタップして電話発信するiPhone, AndroidのバナーやボタンをPCで無効にする方法

明日試したくなるカスタマイズ、ネットな日々に役立つ小技と、たまに旅行の妄想と。