カスタマイズ



DW Question Answer + BuddyPress|ワードプレスをカスタマイズ

Categories | ブログ(WordPress) DW Question Answer BuddyPress

DW Question Answer + BuddyPress を導入にあたり、カスタマイズしたこと。

【 備忘録 】

※ 今回行ったカスタマイズは、全て「functions.php」に記載する。

アップロード先: /wp-content/themes/テーマ名/functions.php

 

・ログイン中の管理バーカスタマイズ

管理バーの左端にワードプレスのロゴ(Wordpressについて)を削除。

 

0604 01 400x227 DW Question Answer + BuddyPress|ワードプレスをカスタマイズ

 

その他、必要なさそうな項目も序に削除。

 

 


//管理バー項目削除
function remove_bar_menus( $wp_admin_bar ) {
    $wp_admin_bar->remove_menu( 'wp-logo' );      // ロゴ
    $wp_admin_bar->remove_menu( 'view-site' );    // サイト名 - サイトを表示
    $wp_admin_bar->remove_menu( 'dashboard' );    // サイト名 - ダッシュボード
    $wp_admin_bar->remove_menu( 'themes' );       // サイト名 - テーマ
    $wp_admin_bar->remove_menu( 'customize' );    // サイト名 - カスタマイズ
    $wp_admin_bar->remove_menu( 'comments' );     // コメント
    $wp_admin_bar->remove_menu( 'updates' );      // 更新
    $wp_admin_bar->remove_menu( 'view' );         // 投稿を表示
    $wp_admin_bar->remove_menu( 'new-content' );  // 新規
    $wp_admin_bar->remove_menu( 'new-post' );     // 新規 - 投稿
    $wp_admin_bar->remove_menu( 'new-media' );    // 新規 - メディア
    $wp_admin_bar->remove_menu( 'new-link' );     // 新規 - リンク
    $wp_admin_bar->remove_menu( 'new-page' );     // 新規 - 固定ページ
    $wp_admin_bar->remove_menu( 'new-user' );     // 新規 - ユーザー
    $wp_admin_bar->remove_menu( 'search' );       // 検索
}
add_action('admin_bar_menu', 'remove_bar_menus', 201);

 

 

・ダッシュボード内の表示オプションとヘルプを削除

 

0604 02 DW Question Answer + BuddyPress|ワードプレスをカスタマイズ

 

//ダッシュボード ウィジェットを削除(管理者以外)
function remove_dashboard_widget() {
	if ( ! current_user_can( 'administrator' ) ) {
	 	remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' ); // 概要
	 	remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' ); // アクティビティ
	 	remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' ); // クイックドラフト
	 	remove_meta_box( 'dashboard_primary', 'dashboard', 'side' ); // WordPressニュース
	}
} 
add_action('wp_dashboard_setup', 'remove_dashboard_widget' );

 

※前もって表示オプションの「概要」と「アクティビティ」は表示させ、必要に応じて

上記記述を入力・削除で調整する。ただし新規のユーザー登録者には

デフォルト時に表示されてしまうので、これもやっておく。

 

 

・管理画面下部の「Wordpressのご利用ありがとうございます。」を削除

//管理画面下部の「Wordpressのご利用ありがとうございます。」を削除
add_filter('admin_footer_text', '__return_empty_string');

 

・管理画面下部のバージョン番号を削除

//管理画面下部のバージョン番号を削除
function remove_footer_version() {
	remove_filter( 'update_footer', 'core_update_footer' ); 
}
add_action( 'admin_menu', 'remove_footer_version' );

 

・ログインロゴのカスタマイズ

function my_login_logo() { ?>
    
<style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/login-logo.png);
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );


//ログインロゴのリンク先変更
function login_logo_url() {
    return get_bloginfo('url');
}
add_filter('login_headerurl', 'login_logo_url');


//ログインロゴのtitle属性を変更
function login_logo_title(){
    return get_bloginfo('name');
}
add_filter('login_headertitle','login_logo_title');

 

※オリジナルロゴ(画像)のアップロード先

/wp-content/themes/テーマ名/images/login-logo.png

元画像サイズは(幅80px、高さ80px)

これ以上のサイズでも問題ないが、元画像サイズに自動縮小される。

 

 

・送信メールのカスタマイズ

送信メールはデフォルトで送信者名(差出人名)が「WordPress」、送信元アドレスが

「wordpress@サイトのドメイン名」になっているので、独自のものに変更。

//メールの差出人名を変更
function custom_mail_from_name( $from_name ) {
	return 'KAWASAKI Motorcycle Q & A';
}
add_filter( 'wp_mail_from_name', 'custom_mail_from_name' );
 

//メールの送信元アドレスを変更
function custom_mail_from( $from_email ) {
	return 'info@hcz.jp';
}
add_filter( 'wp_mail_from', 'custom_mail_from' );

 

しまい

Comment(0) | Trackback(1)

TAGS: / / / | 2016年6月5日 |



WordPress4.5 に更新しました。編集とカスタマイズの改善点

Categories | ブログ(WordPress)

WordPress4.5がリリースされたので更新してみました。

編集とカスタマイズの改善がされたようです。

その中で私が注目したので、編集の改善では「書式のショートカット」。

カスタマイズの改善は「ライブレスポンシブビュー」。

 

WordPress 4.5 01 400x318 WordPress4.5 に更新しました。編集とカスタマイズの改善点

 

編集の改善:書式のショートカット

水平線と <code> が追加た。

半角でダッシュ3本(テンキーのマイナス)「—」を3回たたくと↓

 


 

↑横線 <hr> が自動に引ける。ただしWPは未だ「html5」には未対応なのがネック。

どう言うことかというと、テキスト入力で確認すると、<hr /> となる。

自作テーマは「html5」で作成しているので、構文上支障がでますね。

私的に、早いことWP本体をHTML5に対応してもらいたいです。

 

今後、水平線を頻繁に使いそうなので、スタイルシートに追記しておきました。

 

style.css

hr {
width: 80%;
height: 1px;
border: none;
border-top: 1px #096aa2 dashed;
}

 

 

■ カスタマイズの改善「ライブレスポンシブビュー」

 

WordPress 4.5 02 400x270 WordPress4.5 に更新しました。編集とカスタマイズの改善点

 

ダッシューボード > 外観 > カスタマイズ で、テーマをレスポンシブ表示させる機能。

左下のアイコンをクリックすると、PC・タブレット・スマホと表示が切り替えられる。

 

WordPress 4.5 03 400x270 WordPress4.5 に更新しました。編集とカスタマイズの改善点

タブレット表示

WordPress 4.5 04 400x270 WordPress4.5 に更新しました。編集とカスタマイズの改善点

スマホ表示

 

フリーテーマを選ぶ時に役立ちそうですが、自作テーマはもうレスポンシブ化しているので、

使うことはなさそう。

しまい

Comment(0) | Trackback(0)

TAGS: / / / / / / / / | 2016年4月13日 |



Windows8をWindows7仕様にカスタマイズ

Categories | パソコン

先週Windows8のノートパソコン(lenovo ThinkPad)貰って、

ちょっと使ってみたのですが、めっちゃ使い辛い。

スタート画面ってウザイし、アプリ?そんないらんし。

「すべてのプログラム」って、どこで見れるの?

困ったことにアプリを開いてみたけど、閉じ方も分からん。

そんなこんなで、Windows7の方が全然使い勝手良いから、

win8をwin7仕様にカスタマイズしてみた。

 

24 00 Windows8をWindows7仕様にカスタマイズ

 

備忘録

 

まずは、大きなお世話のlenobo(レノボ)のアプリ。

これを一気にコントロールパネルの「プログラムのアンインストール」で

削除(アンインストール)した。

 

■ うざいスタート画面のアプリを全部削除。

アプリの右上を右クリックすると削除できる。

それから電源入れて立ち上げた時、「スタート画面」をスキップさせ、

デスクトップを表示させるようにした。

 

参考サイト

Windows 8で[スタート]画面をスキップしてデスクトップを表示する

http://www.atmarkit.co.jp/ait/articles/1302/22/news054.html

 

 

■ win7風のスタートボタンを追加

win8からタスクバーのスタートボタンが廃止され、

 

windows01 Windows8をWindows7仕様にカスタマイズ

 

代わりに「スタート画面」とやらが追加されちゃったんだな。

 

フリーソフトのスタートボタンがあったので、インストールする。

 

参考サイト

Windows8にスタートボタンやスタートメニューを追加

http://www.netyasun.com/windows8/win8-start.html

 

コレだけのことをやっただけで、かなり使いやすくなった!

しまい

Comment(0) | Trackback(0)

TAGS: / / / | 2016年2月23日 |



スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに

Categories | ホームページ

前回の(「Sidr」を実装 )の続きです。

実装できたところで、今回はカスタマイズしました。

ボタンを変更し、右からメニューをスライドさせる。

ホームページの横幅が640px以上だと、Sidrのメニューボタンが消え、

横並びのメニューリストが出現する。参考ページ

 

1109 01 224x300 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに    1109 02 224x300 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに

■ メニューボタンオンで右からメニューがスライド。

 

1109 01 224x300 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに   1109 03 300x224 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに

■ 横幅が640以上だとメニューボタンが消え、横並びのメニューリストが出現。

 

HTML

 
<nav id="navigation">
  <ul>
    <li class="close"><a href="#" onClick="jQuery.sidr('close', 'right-sidr');">CLOSE</a></li>
    <li><a href="https://www.hcz.jp/" title="トップページ">MAIN</a></li>
    <li><a href="custom.html" title="カスタム">CUSTOM</a></li>
    <li><a href="kakaku.html" title="価格リスト">KAKAKU-LIST</a></li>
    <li><a href="spec.html" title="HCZスペック">HCZ-SPEC</a></li>
    <li><a href="enqu.html" title="リサーチ">RESARCH</a></li>
    <li><a href="oreno-k.html" title="オレのK">ORENO-K</a></li>
    <li><a href="download.html" title="ダウンロード">DOWNLOAD</a></li>
    <li><a href="hcz-tv.html" title="HCZ TV">HCZ TV</a></li>
    <li><a href="what.html" title="更新情報">WHAT'S</a></li>
    <li class="haji"><a href="https://www.hcz.jp/blog/" title="ブログ">BLOG</a></li>
  </ul>
</nav>

 

css

/* PC用ナビゲーションバー */

#right-menu{ display:none;}

#navigation {
	width:910px;
	padding:8px 0 8px; 
	position:relative;
	overflow:hidden;
	font-family: &quot;Times New Roman&quot;, serif;
	clear:both;
	margin: 0 auto 16px;
	box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
    -moz-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
    -webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
	background-color:#010066;
	}
	
#navigation ul {
	position:relative;
	margin: 0 0 0 40px;
}
#navigation li {
	letter-spacing:0.07em;
	margin: 0;
	list-style:none;	
	position:relative;
	float:left;
	font-weight:bold;
}
#navigation li a {
	color:#08DEE0;
	padding:0 10px;
	border-left: 1px solid #08DEE0;
	-webkit-transition: background-color .9s ease;
	-moz-transition: background-color .9s ease;
	-o-transition: background-color .9s ease;
	transition: background-color .9s ease;
}
#navigation li a:hover {
	color: #010066;
	background-color: #33F6F8;
}
#navigation li.haji a {
	border-right: 1px solid #08DEE0;
}
#navigation li.haji a:hover {
	border-right: 1px solid #08DEE0;
	}


/* モバイル用ナビゲーションバー */

@media screen and (max-width:640px){
	#right-menu{
	padding: 10px;
	text-decoration: none;
	font-weight:bold;
	color:#08DEE0;
	position:absolute;
	right: 5px;
	top: 20px;
	width:70px;
	border-radius: 5px;
	box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
	-moz-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
	-webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
	background-color:#010066;
	display: block;
}

#right-menu:hover{
background:#999;
}

#right-menu {
		display: block;
	}
	
#navigation{
		display: none;
	}
}

※ だらだらとスタイルシートが長くなっちゃってますが、あくまでも当ホームページ使用

なので、参考にされる方はコピペ後、調整してください。

 

 

Sidr 「sidr-package-1.2.1」と、アンドロイド(Android)は相性悪し 改善方法 につづく

Comment(0) | Trackback(1)

TAGS: / / / / / | 2014年11月19日 |



レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

Categories | ホームページ

レスポンシブにするため、流行のスライドメニュー「Sidr」を実装してみました。

でも、スライドメニューになりません・・・

何で??

色々検証して攻略しました。の備忘録です。

1117 01 400x400 レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

参考ページ:http://cosao.net/archives/4937

公式サイト:Sidr [ sidr-package-1.2.1 ]

 

まず公式サイトから必要ファイルをダウンロードし、htmlファイル(htlm5)に

こう記述した。(公式引用)

 

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Your stuff -->
 
<!-- Include Sidr bundled CSS theme -->
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
</head>
<body>
<!-- Your stuff -->
 
<!-- Include jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
</body>
</html>

 

あれ?ダウンロードしたものには、13行目にあるjquery.jsなんて入ってないんだけど。

調べてみても、そのことに触れているページを見つけることが出来ず。

自力で作ってみた。

1117 02 400x400 レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

まずjquery本家ダウンロードに行き、えっ!英語解らないけど、

大体新しいバージョンは数字が大きいものじゃなかろうかと、

Download the compressed, production jQuery 2.1.1をクリックした。

1117 03 400x400 レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

ダダダ~って、英語やら記号が表示されたものを全てコピーし、

始にダウンロードしたjquery.sidr.min.jsを、コピペしたファイル

(jquery.sidr.min – コピー.js)に全て貼り付け、ファイル名をjquery.jsにして保存。

 

次にhtmlコードを記述。

 

<a id="simple-menu" href="#sidr">Toggle menu</a>
 
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#&">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
 
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>

 

以上で問題なく表示できるはず?、が、当ホムペではうまく表示されないのは何故?

かなり時間を費やしましたが、原因がやっと分かりました。

今までライトボックスでjquery(jquery-1.7.2.min.js)を使っていたので、

それと被っていたからでした。

 

<script type="text/javascript" src="lightbox/jquery-1.7.2.min.js"></script>

 

lightboxをやめたら(消したら)無事表示できました!

もしこの手がうまく動作しなかったら、類似した「javascript」が被っていないかを、

再度検証するべし。

 

右からスライドのレスポンシブにカスタマイズ に つづく

Comment(0) | Trackback(1)

TAGS: / / / / / / / | 2014年11月17日 |



検索フォームのカスタマイズ その2 ワードプレス

Categories | ブログ(WordPress)

検索フォーム(検索窓)のカスタマイズをしました。

過去に色々と取り組んでましたが、そもそも当ブログテーマ内に「searchform.php」が

存在しなかったのが良くなかったみたいで、作成してテーマフォルダに追加し、

スタイルシートでカスタムしました。備忘録です。

 

searchform.php

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div class="info"><label class="screen-reader-text" for="s"></label>
        <input type="text" value="" name="s" id="s" />
        <input type="image" src="×××/images/btn.gif" id="searchsubmit" value="Search" />
    </div>
</form>

×××は画像ファイルをアップロードしたURL。

 

 

style.css

/* 検索フォーム */
#info { float:right;
	line-height:33px;
	margin-top: 5px;
}

#s{/* 検索文字列入力欄 */
  width:190px;
  height:14px;
}
#searchsubmit{/* 検索ボタン */
  	position: relative;
	top: 6px;
	left: -26px;
	height:20px;
}

 

過去にカスタマイズした時、wp_includesフォルダー内の「general-template.php」を、

WPがアップデートごとにいじってたが、これからはその必要がなくなった。

Comment(0) | Trackback(0)

TAGS: / / | 2014年11月9日 |



コメント欄のカスタマイズ その2 アバター追加 「Simple Local Avatars」導入

Categories | ブログ(WordPress)

ブログのコメント欄をカスタマイズしました。

以前のカスタマイズは、アバターの選択肢がなかったのを使えるようにし、

各所微調整しました。備忘録です。

 

まず、

設定 > ディスカッション で「アバターの表示」にチェック入れる。

プラグイン「Simple Local Avatars」 を導入(インストール)

ユーザー > あなたのプロフィール で「Upload Avatar」 画像を取り込む

1107 400x218 コメント欄のカスタマイズ その2 アバター追加 「Simple Local Avatars」導入

テーマディレクトリ内「style.css」のコメント欄を少し変更。

 

/*コメント欄のカスタマイズ*/

h3#comments {
	font-size: 11px;
	margin-bottom:20px;
	margin-top:30px;
}

#comments .navigation {
	padding: 0 0 18px 0;
}

.commentlist li.comment {
	line-height: 24px;
	margin: 0 16px 30px -30px;
	padding: 10px 15px 0 15px;
	box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.3);
	background-color:#FFFFFF;
    list-style: none;
	font-size:12px;	
}

.comment-author {
	float:left;
}

.comment-author cite {
	color: #000;
	font-style: normal;
	font-weight: bold;
	padding: 0 0 12px 12px;
	vertical-align:top;
}

.comment-author cite a {
	color: #000;
	font-style: normal;
	font-weight: bold;
	padding: 0 0 12px 12px;
	vertical-align:top;
}

.comment-author span {
	vertical-align:top;
	margin-right:30px;}

.comment-meta { margin-bottom:20px;}

.comment-meta a:link,
.comment-meta a:visited {
	color: #888;
}

.commentlist p{ margin-left:50px;}

.reply {
	font-size: 12px;
	padding: 0 0 10px 0;
}

Comment(0) | Trackback(0)

TAGS: / / / / / | 2014年11月7日 |



YouTubeマイチャンネルをカスタマイズ

Categories | YouTube

0809 397x400 YouTubeマイチャンネルをカスタマイズYouTube : MrHizirida

だいぶん動画も貯まってきたので、紹介動画と再生リストを追加しました。

正直こんなシステムがあることを知ったのは最近です。

Comment(0) | Trackback(0)

TAGS: / / / / | 2014年8月9日 |



ウェジェット「最近のコメント」の簡単カスタマイズ for WordPress

Categories | ブログ(WordPress)

見てみぬ振りしてたおかしな「最近のコメント」表示。

やっと修正しました。

と言うのも、WPはコメントとピンバック(トラックバック)を同じものとし

「最近のコメント」欄(ウェジェット)に表示してまう、困ったチャン。

で、再カスタマイズしたくググってはみたが、どこの記事もphpいじらなきゃ

いけなさそうで、むずそうで。

そこで初心に帰り、どのように抽出表示されてるかソース見てみた。

なるほどね。

<ul>
<li class="recentcomments">コメント</li>
</ul>

ならばと style.css にこう追記しました。

div#sidebar li.recentcomments {
	font-size: 0.73em;
	border-bottom: dotted 1px #aaaaaa;
	margin: 0;
	background-image:none;
	padding-left:10px;
	}

2013 0622 216x300 ウェジェット「最近のコメント」の簡単カスタマイズ for WordPress

因みスタイルシートは当ブログ仕様なので、ご理解下さい。

タグを熟知していればコレぐらい意図も簡単に出来そうでしょ。

Comment(0) | Trackback(0)

TAGS: / | 2013年6月22日 |



休日と今日に色を付けたカレンダー WordPressプラグイン Realtime Calendar

Categories | ブログ(WordPress)

休日と今日に色を付けたカレンダーをウェジェットに追加

WordPressプラグイン Realtime Calendar

前回はウェジェットのカレンダーを、自作テーマに似合うようにレイアウトを

変更し、プラグインを使って曜日を英語表記にしたのですが、

カレンダー以外数箇所まで英語表記されてしまったのでボツにしました。

でぇ、今回は曜日を日本語に戻し休日・今日に色が付けられるプラグインを導入。


プラグイン入手先:小粋空間さん

スタイルシート「style.cssも若干いじり、出来上がりはこんな感じに


2013 0621 休日と今日に色を付けたカレンダー WordPressプラグイン Realtime Calendar

ある程度のカスタマイズは、

wp-content >plugins > realtime-calendar > calendar.css

をさわれば出来そうです。 これ! 結構いけてるプラグインかも。

しまい

Comment(0) | Trackback(1)

TAGS: / / | 2013年6月21日 |

« 古い記事 新しい記事 »