将地图移至底部

时间:2017-06-27 19:38:28

标签: php html wordpress

我的联系表单上有一个谷歌地图,我想在我的小部件下移动它。我不知道该如何解决这个问题。我正在使用WordPress主题'Adama'。这是联系表单php文件:

<?php
/**
 * Template Name: Contact
 *
 * @package GalacticaThemes
 * @subpackage Template
 */

get_header();

$disable_form = get_post_meta( get_the_ID(), 'adama_contact_disable_form', true );

if ( !$disable_form ) {
    // Contact form
    $is_sent = false;
    $is_error = false;
    $errors = array();

    $contact_name = '';
    $contact_email = '';
    $contact_phone = '';
    $contact_subject = '';
    $contact_message = '';

    // If the form is submitted
    if ( isset( $_POST['contact_submitted'] ) ) {

        // Name
        if ( isset( $_POST['contact_name'] ) ) {
            $contact_name = strip_tags( trim( $_POST['contact_name'] ) );
        }
        if ( $contact_name === '' ) {
            // Name is required
            $errors['contact_name'] = esc_html__( 'You forgot to enter your name.', 'adama' );
            $is_error = true;
        }

        // Email
        if ( isset( $_POST['email'] ) ) {
            $contact_email = strip_tags( trim( $_POST['email'] ) );
        }
        if ( $contact_email === '' ) {
            // Email is required
            $errors['contact_email'] = esc_html__( 'You forgot to enter your email address.', 'adama' );
            $is_error = true;
        } else if ( !is_email( $contact_email ) ) {
            // Validate email address
            $errors['contact_email'] = esc_html__( 'You entered an invalid email address.', 'adama' );
            $is_error = true;
        } else {
            $contact_email = sanitize_email( $contact_email );
        }

        // Phone
        if ( isset( $_POST['contact_phone'] ) ) {
            $contact_phone = strip_tags( trim( $_POST['contact_phone'] ) );
        }

        // Subject
        if ( isset( $_POST['contact_subject'] ) ) {
            $contact_subject = strip_tags( trim( $_POST['contact_subject'] ) );
        }
        if ( $contact_subject === '' ) {
            // Subject is required
            $errors['contact_subject'] = esc_html__( 'You forgot to enter message subject.', 'adama' );
            $is_error = true;
        }

        // Message
        if ( isset( $_POST['contact_message'] ) ) {
            $contact_message = sanitize_text_field( strip_tags( trim( $_POST['contact_message'] ) ) );
        }
        if ( $contact_message === '' ) {
            // Message is required
            $errors['contact_message'] = esc_html__( 'You forgot to enter your message.', 'adama' );
            $is_error = true;
        }


        // If there is no error, send email
        if ( !$is_error ) {
            $email_to = galactica_option_email( 'contact_email' );

            $headers = esc_html__( 'From: ', 'adama' ) . "$contact_name <$contact_email>\r\n" . esc_html__( 'Reply-To: ', 'adama' ) . $contact_email;
            $subject = sprintf(
                esc_html__( '[%1$s - Contact] %2$s', 'adama' ),
                get_bloginfo( 'name' ),
                $contact_subject
            );
            $body = sprintf(
                esc_html__( "Name: %s \n\nPhone: %s \n\nEmail: %s \n\nMessage: %s \n\n\n\nNote: This message was sent from contact form on %s website.", 'adama' ),
                $contact_name,
                $contact_phone,
                $contact_email,
                $contact_message,
                get_bloginfo( 'name' )
            );

            $is_sent = wp_mail( $email_to, $subject, $body, $headers );
            if ( !$is_sent ) {
                $is_error = true;
            }
        }
    }
}

// Map position
$map_position = get_post_meta( get_the_ID(), 'adama_contact_map_position', true );
$map_position = galactica_lower_in_array( $map_position, array( 'top', 'side' ), 'top' );
?>

<?php if ( $map_position === 'top' ) : ?>
<section>
    <?php // Google Map
    echo galactica_map( array(
        'type'                => galactica_option( 'contact_map_type', 'road' ),
        'address'             => implode( '|', galactica_option( 'contact_map_address', array() ) ),
        'tooltip'             => '',
        'height'              => galactica_option( 'contact_map_height', 'road' ) . 'px',
        'zoom'                => galactica_option( 'contact_map_zoom', 15 ),
        'scrollwheel_enabled' => false,
    )); ?>
</section>
<?php endif; ?>

<section class="w-section">
    <div class="container">
        <div class="row">

            <div id="content" class="col-md-7 col-content">
                <?php while ( have_posts() ) : the_post(); ?>

                    <?php the_content(); ?>

                    <?php if ( !post_password_required() && !$disable_form ) : ?>
                        <form method="post" action="<?php echo esc_url( get_permalink( get_the_ID() ) ); ?>" id="contact-form" role="form">
                            <?php if ( $is_sent ) : ?>
                                <div class="alert alert-success">
                                    <?php esc_html_e( 'Your message was sent successfully.', 'adama' ); ?>
                                </div>
                            <?php else : ?>
                                <?php if ( $is_error ) : ?>
                                    <div class="alert alert-danger">
                                        <?php esc_html_e( 'There was an error submitting the form. Please check that you have entered valid information and try again.', 'adama' ); ?>
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                    </div>
                                <?php endif; ?>

                                <div class="form-wrapper">
                                    <div class="form-group">
                                        <label for="contact_name"><?php esc_html_e( 'Name', 'adama' ); ?></label>
                                        <input type="text" name="contact_name" id="contact_name" class="form-control form-control-validate-required" placeholder="<?php esc_attr_e( 'Your name', 'adama' ); ?>" value="<?php echo esc_attr( $contact_name ); ?>" />
                                        <?php adama_form_error( $errors, 'contact_name' ); ?>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="contact_email"><?php esc_html_e( 'Email', 'adama' ); ?></label>
                                                <input type="email" name="email" id="contact_email" class="form-control form-control-validate-required form-control-validate-email" placeholder="<?php esc_attr_e( 'Email address', 'adama' ); ?>" value="<?php echo esc_attr( $contact_email ); ?>" />
                                                <?php adama_form_error( $errors, 'contact_email' ); ?>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="contact_phone"><?php esc_html_e( 'Phone', 'adama' ); ?></label>
                                                <input type="text" name="contact_phone" id="contact_phone" class="form-control" placeholder="<?php esc_attr_e( 'Phone number', 'adama' ); ?>" value="<?php echo esc_attr( $contact_phone ); ?>" />
                                                <?php adama_form_error( $errors, 'contact_phone' ); ?>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="contact_subject"><?php esc_html_e( 'Subject', 'adama' ); ?></label>
                                        <input type="text" name="contact_subject" id="contact_subject" class="form-control form-control-validate-required" placeholder="<?php esc_attr_e( 'Subject', 'adama' ); ?>" value="<?php echo esc_attr( $contact_subject ); ?>" />
                                        <?php adama_form_error( $errors, 'contact_subject' ); ?>
                                    </div>
                                    <div class="form-group">
                                        <label for="contact_message"><?php esc_html_e( 'Message', 'adama' ); ?></label>
                                        <textarea name="contact_message" id="contact_message" class="form-control form-control-validate-required contact-message" placeholder="<?php esc_attr_e( 'Write you message here...', 'adama' ); ?>"><?php echo esc_textarea( $contact_subject ); ?></textarea>
                                        <?php adama_form_error( $errors, 'contact_message' ); ?>
                                    </div>

                                    <input type="hidden" name="contact_submitted" value="1" />
                                    <button type="submit" class="btn btn-two" name="send"><?php esc_html_e( 'Send message', 'adama' ); ?></button>
                                </div>

                            <?php endif; ?>
                        </form>
                    <?php endif; ?>

                <?php endwhile; ?>

            </div><!-- #content -->
            <?php get_sidebar( 'contact' ); ?>

        </div>
    </div>
</section>

<?php if ( !$disable_form ) { ?>
    <script>
    /* global jQuery */
    // Javascript validation
    jQuery( document ).ready( function( $ ) {
        "use strict";

        var $form = $( 'form#contact-form' );

        $form.submit( function( e ) {

            // Remove old error messages
            $form.find( '.alert' ).remove();

            // Validate
            var hasError = false;
            $form.find( '.form-control-validate-required' ).each( function() {
                var $ctrl = $( this ),
                    labelText,
                    value = $.trim( $ctrl.val() );

                if ( value === '' ) {
                    hasError = true;

                    labelText = $ctrl.prev( 'label' ).text();
                    $ctrl.parent().append( '<div class="alert alert-danger alert-form-message"><?php esc_html_e( 'You forgot to enter your', 'adama' ); ?> ' + labelText + '.</div>' );
                } else if ( $ctrl.hasClass( 'form-control-validate-email' ) && !( /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/.test( value ) ) ) {
                    hasError = true;

                    labelText = $ctrl.prev( 'label' ).text();
                    $ctrl.parent().append( '<div class="alert alert-danger alert-form-message"><?php esc_html_e( 'You entered an invalid', 'adama' ); ?> ' + labelText + '.</div>' );
                }
            });

            // If no errors submit form via ajax
            if ( hasError ) {
                $form.prepend( '<div class="alert alert-danger"><?php esc_html_e( 'There was an error submitting the form. Please check that you have entered valid information and try again.', 'adama' ); ?><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button></div>' );
            } else {
                var formData = $(this).serialize();
                $.post( $( this ).attr( 'action' ), formData, function( data ) {
                    if ( data.indexOf( '<?php esc_html_e( 'Your message was sent successfully.', 'adama' ); ?>' ) !== -1 ) {
                        $form.find( '.form-wrapper' ).slideUp( 'fast', function() {
                            $form.prepend( '<div class="alert alert-success"><?php esc_html_e( 'Your message was sent successfully.', 'adama' ); ?></div>' );
                        });
                    } else {
                        $form.prepend( '<div class="alert alert-danger"><?php esc_html_e( 'There was an error submitting the form. Please check that you have entered valid information and try again.', 'adama' ); ?><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button></div>' );
                    }
                });
            }

            e.preventDefault();
        });
    });
    </script>
<?php } ?>

<?php get_footer();

目前使用以下设置显示: Contact Form

我希望将地图移动到窗口小部件的底部,但我不确定如何...主题设置目前只有“顶部”(在窗体和窗口小部件上方的全宽)和也出现在小部件顶部的一面...

编辑:

这是Sidebar.php

<?php
/**
 * The sidebar containing the widget area
 *
 * Displays on posts and pages.
 *
 * @package GalacticaThemes
 * @subpackage Template
 */
?>

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

    <div id="sidebar" class="col-md-3 widget-area sidebar-classic" role="complementary">

        <?php galactica_dynamic_sidebar(); ?>

    </div><!-- #sidebar -->

<?php endif; ?>

这是联系人侧栏

<?php
/**
 * The sidebar containing the contact page widget area
 *
 * @package GalacticaThemes
 * @subpackage Template
 */

// Map position
$map_position = get_post_meta( get_the_ID(), 'adama_contact_map_position', true );
$map_position = galactica_lower_in_array( $map_position, array( 'top', 'side' ), 'top' );
?>

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

    <div id="sidebar" class="col-md-5 widget-area sidebar-classic" role="complementary">

        <?php if ( $map_position === 'side' ) : ?>
            <div class="widget">
                <?php // Google Map
                echo galactica_map( array(
                    'type'                => galactica_option( 'contact_map_type', 'road' ),
                    'address'             => implode( '|', galactica_option( 'contact_map_address', array() ) ),
                    'tooltip'             => '',
                    'height'              => galactica_option( 'contact_map_height', 'road' ) . 'px',
                    'zoom'                => galactica_option( 'contact_map_zoom', 15 ),
                    'scrollwheel_enabled' => false,
                )); ?>
            </div>
        <?php endif; ?>

        <?php galactica_dynamic_sidebar(); ?>

    </div><!-- #sidebar -->

<?php endif; ?>

看起来我可能只需要将此地图中的地图移到此处!

2 个答案:

答案 0 :(得分:1)

未经测试,显然但我认为您可以在联系人侧边栏文件中将这两个这样翻转,以便在地图之前调用信息。

&#13;
&#13;
<?php galactica_dynamic_sidebar(); ?>

<?php if ( $map_position === 'side' ) : ?>
    <div class="widget">
        <?php // Google Map
        echo galactica_map( array(
            'type'                => galactica_option( 'contact_map_type', 'road' ),
            'address'             => implode( '|', galactica_option( 'contact_map_address', array() ) ),
            'tooltip'             => '',
            'height'              => galactica_option( 'contact_map_height', 'road' ) . 'px',
            'zoom'                => galactica_option( 'contact_map_zoom', 15 ),
            'scrollwheel_enabled' => false,
        )); ?>
    </div>
<?php endif; ?>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

sidebar-contact.php中只需翻转一行:

<?php
/**
 * The sidebar containing the contact page widget area
 *
 * @package GalacticaThemes
 * @subpackage Template
 */

// Map position
$map_position = get_post_meta( get_the_ID(), 'adama_contact_map_position', true );
$map_position = galactica_lower_in_array( $map_position, array( 'top', 'side' ), 'top' );
?>

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

    <div id="sidebar" class="col-md-5 widget-area sidebar-classic" role="complementary">

        <?php galactica_dynamic_sidebar(); ?>

        <?php if ( $map_position === 'side' ) : ?>
            <div class="widget">
                <?php // Google Map
                echo galactica_map( array(
                    'type'                => galactica_option( 'contact_map_type', 'road' ),
                    'address'             => implode( '|', galactica_option( 'contact_map_address', array() ) ),
                    'tooltip'             => '',
                    'height'              => galactica_option( 'contact_map_height', 'road' ) . 'px',
                    'zoom'                => galactica_option( 'contact_map_zoom', 15 ),
                    'scrollwheel_enabled' => false,
                )); ?>
            </div>
        <?php endif; ?>

    </div><!-- #sidebar -->

<?php endif; ?>

这将通过小部件下的地图提供所需的请求!