Question

如何在插件中包含外部CSS文件？我正在搜索很多时间，但没有任何效果：（（

用PHP编写的Wordpress插件

function fields（）{ 回声'

    <div class="DodajWpis"> <h1> Dodaj wpis </h1> </div> 
    <form method="post" id="#form" action="" enctype="multipart/form-data">

        <label class="katalogLabelName" for="name">Nazwa</label>
        <input class="Input" id="name" type="text" style="width:50%;" name="nazwa" required>

        <label class="katalogLabelName" for="tytul">Tytul</label>
        <input class="Input" type="text" style="width:50%;" name="tytul">

        <label class="katalogLabelName" for="maincategory">Kategoria</label>
        <input class="Input" type="text" style="width:50%;" list="maincategory" name="maincategory">
        <datalist id="maincategory" required>';
            $args = array('show_option_none' => 'No Category','hide_empty' => 0);
            $kategorie = get_categories( $args );
            foreach ( $kategorie as $category ) :
                echo '<option value="' .$category->name . '">' . $category->name . '</option>';
            endforeach;
        echo  '</datalist>  

        <label class="katalogLabelName" for="location">Lokalizacja</label>
        <input class="Input" type="text" style="width:50%;" list="location" name="location">
        <datalist id="location" required>';
            //$args = array('show_option_none' => 'No Category','hide_empty' => 0);
            $lokalizacja = get_categories(array('taxonomy=>location'));
            foreach ( $lokalizacja as $term ) :
                echo '<option value="' .$term->name . '">' . $term->name . '</option>';
            endforeach;
        echo  '</datalist>  


        <label class="katalogLabelName"  for="slowa_kluczowe">Slowa kluczowe (Limit to '.returnme('slowa_klucz_limit').')</label>
        <input class="Input" type="text" style="width:50%;" name="slowa_kluczowe" id="slowa_kluczowe" required>

        <label class="katalogLabelName"  for="email">Adres e-mail</label>
        <input class="Input" type="email" style="width:50%;" name="email" id="email">

        <label class="katalogLabelName"  for="website">Adres strony internetowej</label>
        <input class="Input" type="url" style="width:50%;" id="website" name="website" required>

        <label class="katalogLabelName" for="miasto">Miasto</label>
        <input class="Input" type="text" style="width:50%;" name="miasto" id="miato">


        <input class="Wyslij" type="file" id="async-upload" name="html-upload" accept="image/png, image/jpeg" required >
        <br> 

        <label class="katalogLabelName"  for="textarea">Opis</label>
        <textarea id="textarea" style="width:50%;" name="opis" required></textarea>
        <input type="submit" value="wyslij" class="button">

    </form>
';

}
add_shortcode('form', 'fields');

如何添加外部CSS文件？

Answer 1

您可以尝试将其放在回声之后` <link rel="stylesheet" href="https://example.com/css/style.css">

<link rel="stylesheet" href="https://example.com/css/style.css">

    <div class="DodajWpis"> <h1> Dodaj wpis </h1> </div> 
    <form method="post" id="#form" action="" enctype="multipart/form-data">

        <label class="katalogLabelName" for="name">Nazwa</label>
        <input class="Input" id="name" type="text" style="width:50%;" name="nazwa" required>

        <label class="katalogLabelName" for="tytul">Tytul</label>
        <input class="Input" type="text" style="width:50%;" name="tytul">

        <label class="katalogLabelName" for="maincategory">Kategoria</label>
        <input class="Input" type="text" style="width:50%;" list="maincategory" name="maincategory">
        <datalist id="maincategory" required>';
            $args = array('show_option_none' => 'No Category','hide_empty' => 0);
            $kategorie = get_categories( $args );
            foreach ( $kategorie as $category ) :
                echo '<option value="' .$category->name . '">' . $category->name . '</option>';
            endforeach;
        echo  '</datalist>  

        <label class="katalogLabelName" for="location">Lokalizacja</label>
        <input class="Input" type="text" style="width:50%;" list="location" name="location">
        <datalist id="location" required>';
            //$args = array('show_option_none' => 'No Category','hide_empty' => 0);
            $lokalizacja = get_categories(array('taxonomy=>location'));
            foreach ( $lokalizacja as $term ) :
                echo '<option value="' .$term->name . '">' . $term->name . '</option>';
            endforeach;
        echo  '</datalist>  


        <label class="katalogLabelName"  for="slowa_kluczowe">Slowa kluczowe (Limit to '.returnme('slowa_klucz_limit').')</label>
        <input class="Input" type="text" style="width:50%;" name="slowa_kluczowe" id="slowa_kluczowe" required>

        <label class="katalogLabelName"  for="email">Adres e-mail</label>
        <input class="Input" type="email" style="width:50%;" name="email" id="email">

        <label class="katalogLabelName"  for="website">Adres strony internetowej</label>
        <input class="Input" type="url" style="width:50%;" id="website" name="website" required>

        <label class="katalogLabelName" for="miasto">Miasto</label>
        <input class="Input" type="text" style="width:50%;" name="miasto" id="miato">


        <input class="Wyslij" type="file" id="async-upload" name="html-upload" accept="image/png, image/jpeg" required >
        <br> 

        <label class="katalogLabelName"  for="textarea">Opis</label>
        <textarea id="textarea" style="width:50%;" name="opis" required></textarea>
        <input type="submit" value="wyslij" class="button">

    </form>

Answer 2

您应该使用wordpress enque函数添加CSS文件。

首先，如果您想在frotend上调用上述简码。然后在前端插入CSS。

    add_action( 'wp_enqueue_style', 'add_frontend_css');

    function add_frontend_css (){
             wp_enqueue_style( 'jquery-ui-style', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true);

    }

如果要在管理面板上添加它，请在钩子下面调用。

    add_action( 'admin_enqueue_scripts', 'add_backend_css');

    function add_backend_css (){
             wp_enqueue_style( 'jquery-ui-style', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true);

    }

包括内部文件。

如果要添加位于插件根目录中的内部CSS文件，请使用以下命令。

 wp_enqueue_style( 'jquery-ui-style', plugins_url().'/style.css', true);

如果您的css文件位于css目录中的当前主题下。

wp_enqueue_style( 'jquery-ui-style', get_template_directory_uri().'/css/style.css', true);

我如何将我的外部CSS文件包含到我的插件中

2 个答案: