ブラウザによってボタンに違いが?<input type=”submit”>にCSSを効かせる方法

All
スポンサーリンク

 <input type=”submit”>にCSSを効かせる方法

今回BuddyPressのログインフォームのカスタマイズと<input type=”submit”>にCSSを効かせる方法についてです。<input type=”submit”>にCSSを効かせる方法だけみたいという方はこちらから!ウィジェットでログインフォームを出力した際に

下記画像のような左のような形で出力されてしまいます。これを日本語化し、右のようなフォーマットにしてみたいと思います!

これを編集するには、buddypress/bp-core/classes/class-bp-core-login-widget.php の編集をします!ポイントとしては、<?php _e( ‘ここの修正‘, ‘buddypress’ ); ?>やlabelのコメントアウト<!—->また、デフォルトの文字を入れるためplaceholder=”インプットボックスのデフォルト文字を入力“を使ってあげています。下記のコードを見るとわかるのですが、htmlに直接style=””を書き込んで右のような形にしています。ちょっと試してみたい、という方は下のコードをコピーしてそのまま貼りつけてもらったら使えると思うので、試してみてください!

 

<?php
/**
* BuddyPress Core Login Widget.
*
* @package BuddyPress
* @subpackage Core
* @since 1.9.0
*/

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

/**
* BuddyPress Login Widget.
*
* @since 1.9.0
*/
class BP_Core_Login_Widget extends WP_Widget {

/**
* Constructor method.
*
* @since 1.9.0
*/
public function __construct() {
parent::__construct(
false,
_x( '(BuddyPress) Log In', 'Title of the login widget', 'buddypress' ),
array(
'description' => __( 'Show a Log In form to logged-out visitors, and a Log Out link to those who are logged in.', 'buddypress' ),
'classname' => 'widget_bp_core_login_widget buddypress widget',
'customize_selective_refresh' => true,
)
);
}

/**
* Display the login widget.
*
* @since 1.9.0
*
* @see WP_Widget::widget() for description of parameters.
*
* @param array $args Widget arguments.
* @param array $instance Widget settings, as saved by the user.
*/
public function widget( $args, $instance ) {
$title = isset( $instance['title'] ) ? $instance['title'] : '';

/**
* Filters the title of the Login widget.
*
* @since 1.9.0
* @since 2.3.0 Added 'instance' and 'id_base' to arguments passed to filter.
*
* @param string $title The widget title.
* @param array $instance The settings for the particular instance of the widget.
* @param string $id_base Root ID for all widgets of this type.
*/
$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

echo $args['before_widget'];

echo $args['before_title'] . esc_html( $title ) . $args['after_title']; ?>

<?php if ( is_user_logged_in() ) : ?>

<?php
/**
* Fires before the display of widget content if logged in.
*
* @since 1.9.0
*/
do_action( 'bp_before_login_widget_loggedin' ); ?>

<div class="bp-login-widget-user-avatar" >
<a href="<?php echo bp_loggedin_user_domain(); ?>">
<?php bp_loggedin_user_avatar( 'type=thumb&width=50&height=50' ); ?>
</a>
</div>

<div class="bp-login-widget-user-links" >
<div class="bp-login-widget-user-link"><?php echo bp_core_get_userlink( bp_loggedin_user_id() ); ?></div>
<div class="bp-login-widget-user-logout"><a class="logout" href="<?php echo wp_logout_url( bp_get_requested_url() ); ?>" style="font-size:15px;background:#fff;padding:6.5px;"><?php _e( 'ログアウト', 'buddypress' ); ?></a></div>
</div>

<?php

/**
* Fires after the display of widget content if logged in.
*
* @since 1.9.0
*/
do_action( 'bp_after_login_widget_loggedin' ); ?>

<?php else : ?>

<?php

/**
* Fires before the display of widget content if logged out.
*
* @since 1.9.0
*/
do_action( 'bp_before_login_widget_loggedout' ); ?>

<form name="bp-login-form" id="bp-login-widget-form" class="standard-form" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="post" style="margin-top:42px;">
<!--<label for="bp-login-widget-user-login"><?/*php _e( 'Username', 'buddypress' ); */?></label>-->

<input type="text" name="log" id="bp-login-widget-user-login" class="input" value="" placeholder="ユーザー名" style="width:110px;height:25px;font-size:15px;padding-left:10px;"/>

<!--<label for="bp-login-widget-user-pass"><?/*php _e( 'Password', 'buddypress' ); */?></label>-->
<input type="password" name="pwd" id="bp-login-widget-user-pass" class="input" value="" placeholder="パスワード" style="width:110px;height:25px;font-size:15px;padding-left:10px;;margin-left:7px;"<?php bp_form_field_attributes( 'password' ) ?> />

<!--<div class="forgetmenot" style="font-size:15px;float: left;height:25px;" ><label for="bp-login-widget-rememberme"><input name="rememberme" type="checkbox" id="bp-login-widget-rememberme" value="forever"/> <?php _e( 'ログイン情報を記憶', 'buddypress' ); ?></label></div>-->

<input type="submit" name="wp-submit" id="bp-login-widget-submit" class="orign_log" value="<?php esc_attr_e( 'ログイン', 'buddypress' ); ?>" style="font-size:15px;height:31px;margin-left:7px;border-style:none;" />
<?php if ( bp_get_signup_allowed() ) : ?>
<span class="bp-login-widget-register-link" ><a href="<?php echo esc_url( bp_get_signup_page() ); ?>" style="font-size:15px;background:#fff;padding:6.5px;"><?php _e( '会員登録', 'buddypress' ); ?></a></span>

<?php endif; ?>

<?php

/**
* Fires inside the display of the login widget form.
*
* @since 2.4.0
*/
do_action( 'bp_login_widget_form' ); ?>

</form>

<?php

/**
* Fires after the display of widget content if logged out.
*
* @since 1.9.0
*/
do_action( 'bp_after_login_widget_loggedout' ); ?>

<?php endif;

echo $args['after_widget'];
}

/**
* Update the login widget options.
*
* @since 1.9.0
*
* @param array $new_instance The new instance options.
* @param array $old_instance The old instance options.
* @return array $instance The parsed options to be saved.
*/
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = isset( $new_instance['title'] ) ? strip_tags( $new_instance['title'] ) : '';

return $instance;
}

/**
* Output the login widget options form.
*
* @since 1.9.0
*
* @param array $instance Settings for this widget.
* @return void
*/
public function form( $instance = array() ) {

$settings = wp_parse_args( $instance, array(
'title' => '',
) ); ?>

<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'buddypress' ); ?>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $settings['title'] ); ?>" /></label>
</p>

<?php
}
}

次に複数のブラウザでちゃんと出力されているか確認したいと思います。

Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

Toshikazu Hiranoをフォローする
All
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント

Translate »