WordPress一覧

WordPress、Simplicity2、ヘッダーの下にlivedoor 相互RSSを設置する

WordPress、Simplicity2、ヘッダーの下にlivedoor 相互RSSを設置する

設置するだけならば、単純に下記の記事を参考にウィジェットで、livedoor 相互RSSの貼付けコード貼り付ければ完了です。

WordPress、Simplicity2、ヘッダーの下にRSS掲載スペースを作る 子テーマfunctions.phpに、 regist...

 

livedoor 相互RSSの見栄えをよくする

livedoor 相互RSSのcssをダウンロードします。

http://blogroll.livedoor.net/css/default.css

下記のコードをSimplicity2 child: スタイルシート (style.css)に追加します。

自分の好みに合わせて設定を変えてください。

/* ----------------------------------------------- */
/*

BlogRoll css

*/
/* ----------------------------------------------- */

.blogroll-channel,
.blogroll-channel * {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
text-align: left;
}
.blogroll-channel {
margin-bottom: 5px;
padding: 5px;
background: #fff;
}

.blogroll-channel .blogroll-list-wrap {
margin-bottom: 10px;
}

.blogroll-channel .blogroll-list {
list-style-type: none;
margin-bottom: 3px;
font-size: 12px;
line-height: 1.3;
}

.blogroll-channel .blogroll-list img {
vertical-align: middle;
}

.blogroll-channel img.blogroll-icon,
.blogroll-channel img.blogroll-favicon {
margin: 0 5px 0 0;
}

.blogroll-channel img.blogroll-favicon {
width: 16px;
height: 16px;
}

.blogroll-channel a.blogroll-link {
}

.blogroll-channel .blogroll-new-entry {
margin-left: 5px;
color: red;
}

.blogroll-channel .blogroll-clip,
.blogroll-channel .blogroll-hatebu {
margin: 0 0 0 5px;
}

.blogroll-channel .blogroll-link-time {
margin: 0 0 0 3px;
color: #666;
font-size: 10px;
}

.blogroll-channel .blogroll-ad-img {
}

.blogroll-channel .blogroll-ad-text {
display: block;
margin-top: 5px;
color: #666;
font-size: 12px;
}

 

livedoor 相互RSSにスクロールバーと枠を付ける。

下記のコードをSimplicity2 child: スタイルシート (style.css)に追加します。

.blogroll-channel {
	border: solid 1px #999 !important;
	height: 200px !important;
	overflow-y: scroll;
}

height: 200pxは、枠の高さを調節できます。

 

livedoor 相互RSSを横に2つ並べる

下記のコードをSimplicity2 child: スタイルシート (style.css)に追加します。

.blogroll-wrapper {
	width: 100%;
	overflow: hidden;
}
.blogroll-innner {
	float: left;
	width: 50%;
}

 

livedoor 相互RSSを表示する場所のウィジェットに追加します。

<div class="blogroll-wrapper">
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその1をここに挿入 -->
 	</div>
 	<div class="blogroll-innner">
 		<!-- 相互RSSのタグその2をここに挿入 -->
 	</div>
</div>

当ブログで現在使用中のlivedoor 相互RSSが、横に2つ並べてある状態になります。
2018.5.26時点


WordPress、Simplicity2、ヘッダーの下にRSS掲載スペースを作る

WordPress、Simplicity2、ヘッダーの下にRSS掲載スペースを作る

子テーマfunctions.phpに、

register_sidebar(array(
     'name' => 'top_left' ,
     'id' => 'top_left' ,
     'before_widget' => '<div class="widget">',
     'after_widget' => '</div>',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
));
register_sidebar(array(
     'name' => 'top_right' ,
     'id' => 'top_right' ,
     'before_widget' => '<div class="widget">',
     'after_widget' => '</div>',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
));

コードを追加します。

子テーマbefore-main.phpに、

<div class="top rss">
    <div class="left"><?php dynamic_sidebar('top_left'); ?></div>
    <div class="right"><?php dynamic_sidebar('top_right'); ?></div>
</div>

コードを追加します。

あとは、ダッシュボード→ウィジェットでRSSウィジェットを追加。

 

動作環境

Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。


WordPress プラグイン BackWPup バージョンアップ失敗 ⇒ 追記 バージョンアップ成功

追記 2018年5月24日

追記 2018年5月24日 BackWPup 3.4.5から3.5.1へ バージョンアップ成功

BackWPupのバージョンアップ通知が来ていたので、今回も普通に更新したら成功しました。
不具合が修正されたようです。

 

2018年5月17日 BackWPup 3.4.5から3.5.0へ バージョンアップを失敗する

WordPressプラグイン、BackWPupのバージョンアップ通知が来ていたので、普通に更新したらエラーコード発生で、ブログにアクセス不能、ダッシュボードもアクセス不能。

いろいろ試しましたが、すべてのページにアクセス不能。

※エラーコード番号は、復旧に慌てて控えるのを忘れました。

 

この記事の動作環境

WordPress 4.9.5

Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。

BackWPup 3.4.5

 

ブログの復旧

FTPソフトでwp-content > plugins にアクセスし「backwpup」を適当な名前にリネーム。

この時点でブログやダッシュボードも通常通りアクセス可能になる。

先程リネームしたファイル名を元に戻します。

管理メニュー > プラグインのページに移動し、BackWPupを削除。

ブログのバックアップがないと困るので、

https://ja.wordpress.org/plugins/backwpup/advanced/ から、

旧バージョンの3.4.5をダウンロードして、再インストール。

再設定をして終了。

2018年5月18日時点で、自動バックアップも問題なく動作しています。

同じ様な現象の方がいましたらコメントお待ちしております。


WordPress、Simplicity2、テーブルの枠線を消す方法

今回は、WordPress、Simplicity2を使っていて枠線を消す指定をしても消えない場合の消し方です。

 

WordPress、Simplicity2、テーブルの枠線を消す方法
サンプル1
<table border=”0″ width=”300″>
<tbody>
<tr>
<td>サンプル1</td>
</tr>
</tbody>
</table>

上記の様に「border=”0″」を指定してテーブルを作成しても枠線が消えない場合でも枠線を消す方法をご紹介します。

 

サンプル2
<table border=”0″ width=”300″>
<tbody>
<tr>
<td style=”border:none;”>サンプル2</td>
</tr>
</tbody>
</table>

サンプル2の様に、tdタグに「style=”border:none;”」を追加する事で枠線が消えます。


WordPress、Simplicity2、自動バックアップ方法

WordPress、Simplicity2、自動バックアッププラグインの導入方法

今回は、サーバーで運用中のWordPress本体ファイル(画像ファイル、テーマファイル含む)と、データベースファイルを自動的にバックアップできるプラグイン「BackWPup」を使用します。

WordPressは、本体ファイルとデータベースファイルの2つに分かれているので、両方バックアップする必要があります。

日本語で設定ができるので使いやすいと思います。

 

※下記の動作環境での記事になります。

動作環境
Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。

 

自動バックアッププラグイン「BackWPup」のインストール

WordPressの管理画面 > プラグイン > 新規追加 > 検索で「BackWPup」と入力。

検索結果から「BackWPup」の「今すぐインストール」をクリックする。

インストールが完了したら、有効化をクリックする。

 

「WordPress本体ファイル」自動バックアップ設定

WordPressの管理画面 > BackWPup > 新規ジョブを追加

 

一般タブを選択

設定個所は、

このジョブの名前 > 自分の覚えやすい名前を設定

このジョブは… > ファイルのバックアップだけチェックする

アーカイブ名 > 表示されたままでOKです

アーカイブ形式 > windowsの方は、Zipを選択

バックアップファイルの保存方法 > フォルダーへバックアップをチェックする

ログファイルの3項目 > 表示されたままでOKです

変更を保存をクリック。

 

スケジュールタブを選択

ジョブの開始方法 > WordPressのcronを選択

スケジューラタイプ > 基本を選択

スケジューラ > ご自分の環境に合わせて設定してください。
週に1回程度で2:00-4:00が良いと思います。

変更を保存をクリック。

 

ファイルタブ、宛先:フォルダタブ

通常、初期設定で問題ありませんが、ご自分の環境で設定を変えてください。

これで設定は終了です。

 

すぐにバックアップを取りたい場合

WordPressの管理画面 > BackWPup > ジョブ

ご自分がつけたジョブ名にマウスのポインターを重ねて「今すぐ実行」をクリックでバックアップできます。

 

バックアップファイルのダウンロード

WordPressの管理画面 > BackWPup > バックアップ

ダウンロードしたいファイルにマウスのポインターを重ねて「ダウンロード」をクリックでPCに保存できます。

 

「データベースファイル」自動バックアップ設定

WordPressの管理画面 > BackWPup > 新規ジョブを追加

 

一般タブを選択

設定個所は、

このジョブの名前 > 自分の覚えやすい名前を設定

このジョブは… > データベースのバックアップ・インストール済みプラグイン一覧の2つにチェック

アーカイブ名 > 表示されたままでOKです

アーカイブ形式 > windowsの方は、Zipを選択

バックアップファイルの保存方法 > フォルダーへバックアップをチェックする

ログファイルの3項目 > 表示されたままでOKです

変更を保存をクリック。

 

スケジュールタブを選択

ジョブの開始方法 > WordPressのcronを選択

スケジューラタイプ > 基本を選択

スケジューラ > ご自分の環境に合わせて設定してください。
ブログを毎日頻繁に更新する人は1日に1回程度で2:00-4:00が良いと思います。

変更を保存をクリック。

 

DBバックアップタブを選択

バックアップするテーブル > すべてチェックする

バックアップファイル名 > 表示されたままでOKです

バックアップファイルの圧縮 > GZipを選択

変更を保存をクリック。

 

プラグイン、宛先:フォルダタブ

通常、初期設定で問題ありませんが、ご自分の環境で設定を変えてください。

これで設定は終了です。

 

すぐにバックアップを取りたい場合

WordPressの管理画面 > BackWPup > ジョブ

ご自分がつけたジョブ名にマウスのポインターを重ねて「今すぐ実行」をクリックでバックアップできます。

 

バックアップファイルのダウンロード

WordPressの管理画面 > BackWPup > バックアップ

ダウンロードしたいファイルにマウスのポインターを重ねて「ダウンロード」をクリックでPCに保存できます。

 

 

定期メンテナンス

1回設定すると自動でバックアップを取ってくれますが、サーバーのクラッシュなどに備えてご自分のPCやUSBメモリーなどに定期的に保存しましょう。


WordPress、Simplicity2、サイドバートップに広告を設定すると「広告のラベル」が表示されない?

下記の動作環境で広告設定をサイドバートップにすると通常表示される「スポンサーリンク」が表示されません。

動作環境
Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。

これは、Simplicityの仕様で表示されないようになっているようです。

表示させる設定として、

外観 → テーマの編集 → Simplicity2 child: スタイルシート (style.css)

style.cssに追加で下記の一行を書き込めば、表示されるようになります。

#sidebar .ad-space .ad-label{ display:block; }


WordPress、Simplicity2、記事間に線を引く

関連記事の記事間、人気記事の記事間に線を引く方法

動作環境
Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。
WordPress Popular Postsのインストール。(バージョン 3.3.4:人気記事表示のプラグイン)

外観 → テーマの編集 → Simplicity2 child: スタイルシート (style.css)

 

style.cssに追加で書き込めば、設定が反映されます。

/* 関連記事の記事間に線を引く */
#main .related-entry {
border-bottom: 5px dotted #a9b1fc;
padding-bottom: 15px;
}

 

/* 人気記事の記事間に線を引く */
.wpp-list li {
border-bottom: 5px dotted #a9b1fc;
padding-bottom: 10px;
}

 

「dotted」の部分を変更すると線の種類が変わります。

solid:1本線
double:2本線
dotted:点線
dashed:破線

 

「#a9b1fc」の部分を変更すると線の色が変わります。

#ff0000 #cc0000 #990000
#00ff00 #00cc00 #009900
#ffff00 #cccc00 #999900
#660000 #0000ff #0000cc
#000099 #ff00ff #cc00cc
#990099 #00ffff #00cccc
#009999 #000000 #666666
#999999 #cccccc #ffffff

 

「border-bottom: 5px」の数字の部分を変更すると線の太さが変わります。

dotted:点線:1px
dotted:点線:2px
dotted:点線:3px
dotted:点線:4px
dotted:点線:5px
dotted:点線:6px
dotted:点線:7px
dotted:点線:8px
dotted:点線:9px
dotted:点線:10px

 

「padding-bottom: 10px;」の数字の部分を変更すると文字と線の間の余白が変わります。

文字と線の間の余白が「5px」です。
文字と線の間の余白が「10px」です。
文字と線の間の余白が「15px」です。
文字と線の間の余白が「20px」です。
文字と線の間の余白が「25px」です。

WordPress、Simplicity2、人気記事の表示方法

人気記事をサイドバーやフッターにウィジェットでランキング表示するプラグインの導入方法

サイト内の記事を人気順にランキング表示できるプラグインです。

コメント数、累積閲覧数、1日の平均閲覧数でランキング表示できます。

 

※下記の動作環境での記事になります。

動作環境
Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。

 

人気記事表示プラグイン「WordPress Popular Posts」のインストール

WordPressの管理画面 > プラグイン > 新規追加 > 検索で「WordPress Popular Posts」と入力。

検索結果から「WordPress Popular Posts」の「今すぐインストール」をクリックする。

インストールが完了したら、有効化をクリックする。

 

「WordPress Popular Posts」の日本語化

インストール後は、英語表記になっているので日本語化した方が便利だと思う。

詳しくは、
wordpress popular posts 日本語 最新翻訳ファイル | パソコン生活サポートPasonal
を参照してください。

 

「WordPress Popular Posts」の設定

WordPressの管理画面 > 設定 > WordPress Popular Posts

最初は初期設定で問題ないと思います。

 

サイドバーに人気記事の表示設定

WordPressの管理画面 > 外観 > ウィジェット > サイドバーウィジェットに「WordPress Popular Posts」をドラッグする。

タイトルなどの表示設定をして終了です。

ブログに戻って表示されているか確認してください。


WordPress、Simplicity2、スタイルシートの設定

動作環境
Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。

外観 → テーマの編集 → Simplicity2 child: スタイルシート (style.css)

style.cssに追加で書き込めば、設定が反映されます。

参考
/* サイドバーウィジェットの見出し書式を設定する */
#sidebar .widget_title{
font-size: 16px;
background-color: #f6f6f6;
border-left: 8px solid #a9b1fc;
margin: 5px;
padding: 5px;
}

参考
/* 投稿、固定ページタイトルの見出し書式を設定する */
.article h1{
font-size: 28px;
}

参考サイト
Simplicity
HTMLクイックリファレンス


スポンサーリンク
Sponsered Link
Sponsered Link