WordPressのギャラリーに画像を追加する方法

WordPressののギャラリー機能、とても便利で重宝しているのですが、

新しく画像を追加する方法がわからん!出来ないことはないだろうといろいろ試していたところようやくできましたので、ご報告します。

まず、既存のフォトギャラリーをクリックして指定します。

その後いつも通り画像を追加ボタンで画像を追加

ギャラリーへの画像の追加方法

の操作でギャラリーへ画像が追加されます。

WordPress Twenty Tenの検索ボックスをちょっと格好良く

Twenty Tenの検索ボックスを表示すると何か味気ないボックスが出てきます。

ちょっと無機質な感じの検索ボックスをちょっと格好よくしてみます。

検索ボックスの角を丸くするだけで少し見栄えがよくなります。

CSSに下記を追加してください。

.widget_search {
	border: 1px solid #ccc;
	background-color: #f3f3f3;
	padding: 7px 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

WordPressのページのURLに.htmlをつけるプラグイン

投稿記事のURLは、パーマリンク設定で.htmlを追記することができるのですが、

WordPressのページでは付けることができません。

SEOで.htmlをつけることがどれだけ効果があるかはわからないのですが、気になる方は利用してみてください。

WordPressのページのURLに.htmlをつけるのに利用するプラグインは、.html on PAGES です。

利用方法は簡単で、

プラグイン>新規追加

で検索してインストールしてください。

あとはプラグインを有効化すればOKです。

 

WordPress管理画面のフッター文章の変更

functions.phpに以下のコードを追記。

function custom_admin_footer() {
    echo ' お困りの際は<a href="http://hogehoge.com/" title="HOGEHOGE">×××</a>までお気軽にお問い合わせ下さい。';
}
add_filter('admin_footer_text', 'custom_admin_footer');

マニュアルへのリンクかお問合せフォームにでもリンクさせるとよさそうです。

WordPressのfunctions.phpでログイン画面&管理画面のロゴ変更する

プラグインで変更できるものもあるようですが、極力プラグインは入れたくないといった考えの方も多いと思います。

functions.phpにコードを入力することで、わりとお手軽に変更できる方法をご紹介します。

ログイン画面のロゴ変更

ログイン画面から変更していきましょう。まずは画像を用意します。
デフォルトのサイズは326×64ですので、その大きさの画像を用意してください。

画像ができたら使用しているテンプレートフォルダに適当な名前を付けて保存します。
ここでは「wp-login.png」という名前で保存しました。

そしてfunctions.phpに以下のコードを追加すればOKです。

function login_logo() {
	echo '<style type="text/css">
		h1 a {
			background-image: url('.get_bloginfo('template_directory').'/wp-login.png);
		}
		</style>';
}
add_action('login_head', 'login_logo');

管理画面の左上部分のロゴ変更

管理画面もログイン画面とやり方はほとんど同じです。

デフォルトのサイズは32×32ですので、その大きさの画像を用意してください。

ここでは「wp-admin.png」という名前で保存しました。

function admin_logo() {
	echo '<style type="text/css">
		#header-logo { background-image: url('.get_bloginfo('template_directory').'/wp-admin.png); }
		</style>';
}
add_action('admin_head', 'admin_logo');

 

CSSでコメント下の余分な文章を削除

コメント下の余分なコメント

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CSSにちょっと追加するだけで削除できちゃいます。
追加するコードはこれ、

.form-allowed-tags {
	display:none;
}

display:noneはいろいろなところで応用できそうですね。

Twenty Tenのテーマに枠線をつける

Twenty Tenのテーマって背景との境目がのっぺりしてますよね?

背景との間に枠線を入れるだけで、どっしりとした感じになりました。

#wrapperの部分のCSSにborder要素を入れるだけです。

#wrapper {
	background: #fff;
	margin-top: 0px;
	padding: 0 20px;
	border-right: 5px solid #DEDEC3;
	border-left: 5px solid #DEDEC3;
}

このサイトでは5pxと太い線にしました。

WordPressで人間用サイトマップを自動的に生成するのに超便利なプラグイン

人間用サイトマップとは、訪問者である人間が見るほうのサイトマップを表示させる手順です。

以前はページテンプレートをつくったりして対応していたのですが、このプラグインを使ったほうがスッキリします。

また、サイトマップのデザインも13種類から選べるのでサイトのイメージのあったサイトマップが作れることと思います。

利用するプラグインは、PS Auto Sitemapです。

WordPressのプラグインとして導入すると、超短時間でお手軽にサイトマップを自動表示させることができるようになります。

プラグイン>新規追加

で検索してインストールしてください。

ご利用方法

  1. サイトマップを表示させたい記事を作成します。
  2. 作成した記事のcontent部分に、HTMLモードで以下のコードを入力します。<!-- SITEMAP CONTENT REPLACE POINT -->
  3. 記事編集画面で記事ID(アドレスバーの &post=nn )を確認し、『サイトマップを表示する記事』欄に指定します。

Twenty Tenのテーマの上下の余白を詰める

Twenty Tenのテーマの上下の余白ってなんかデザイン的にむず痒くないですか?

上下の余白を詰めると少し落ち着いた感じがでます。

Twenty TenのデフォルトでのCSSは、上の余白部分を

#wrapper {background: #fff;margin-top: 20px;padding: 0 20px;}

となっているところを、

#wrapper {background: #fff;margin-top: 0px;padding: 0 20px;}

下の余白の部分については、

#footer {margin-bottom: 20px;}

となっているところを、

#footer {margin-bottom: 0px;}

のように変更するか子テーマに追加してください。

子テーマに追加することで、子テーマのほうが優先されます。

WordPressのデフォルトテーマ「Twenty Ten」の子テーマを作る方法

Twenty Tenをカスタマイズするには2つの方法があります。

  1. テーマを直接ファイルを書き換える方法。
  2. 子テーマをつくる。

1の方法でも良いのですが、テーマがバージョンアップすると上書きされてせっかくの努力も水の泡;;なので、子テーマをつくるべしですね。

子テーマというのは、親のテーマを利用して必要な部分だけ替えてしまうというとても便利なテーマです。意味的には「寄生」のほうがしっくりきますね。

まずは、wp-content>themes に好きな名前で子テーマのフォルダを作ります。その中身は、最低限 「style.css」 があればOKです。

この「style.css」の最初のコメント部分で「私はTwenty Tenの子テーマですよ」と宣言します。

@charset "UTF-8";
/*
Theme Name: Yumilx
URI:        http://example.com/
Description:TwentyTenの子テーマ
Author:     Yumilx
Template:   twentyten
Version:    1.0
*/
@import url('../twentyten/style.css');
  • Theme Name (必須) 子テーマ名
  • Theme URI (任意) 子テーマのウェブページ
  • Description (任意) テーマの説明
  • Author URI (任意) 作者のウェブページ
  • Author (任意) 作者の名前
  • Template (必須) 親テーマのディレクトリ名 (大文字小文字を区別します)
  • Version (任意) 子テーマのバージョン

「子テーマ名」と「親テーマのディレクトリ名」があればOKです。

1行目@charset “utf-8″;はCSSの中に日本語でコメントを書くときは入れておきます。

このCSSファイルをアップロードした後、 外観>テーマ で作成した子テーマを選択すればOKです。