it-swarm.com.ru

Как использовать функции WordPress (PHP) в файлах партиций AngularJS?

Я использую AngularJS для загрузки списка своих постов в WordPress, однако я не могу заставить ни одну из своих функций PHP работать с моим файлом partials.

Я пытался использовать что-то вроде search.php вместо search.html, но при этом я получаю такие ошибки, как фатальная ошибка get_post_meta не определена.

Теперь я знаю, что мы не предполагаем смешивать клиентскую сторону с серверной, и я могу использовать какой-то сервис для разбора моего PHP, но я понятия не имею, как это сделать. Мне нужен мой search.php для рендеринга моих тегов PHP, чтобы я мог отображать пользовательские поля и использовать несколько функций PHP, которые у меня есть.

Каков наилучший способ сделать это?

На моей странице шаблона (.php) у меня есть -

<div id="page" ng-app="app">
        <header>
            <h1>
                <a href="<?php echo home_url(); ?>">Search</a>
            </h1>
        </header>
  <?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

   <div ng-Cloak ng-controller="MyController" class="my-controller">
<div ng-view></div>     
</div>
  <?php endwhile; ?>
 <?php endif; ?>
<?php rewind_posts(); ?>
<div ng-controller="OtherController" class="other-controller">
          <div class="text-center">
          <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="/partials/dirPagination.tpl.html"></dir-pagination-controls>
          </div>
        </div>
        <footer>
            &copy; <?php echo date( 'Y' ); ?>
        </footer>
    </div>

И в моем файле PHP, который я хочу вызвать, есть такие функции, как -

<?php 
$pcomp1b = get_post_meta(get_the_ID(), 'pa_meta_comp1b', true); 
$pcomp1c = get_post_meta(get_the_ID(), 'pa_meta_comp1c', true);
$pcomp1d = get_post_meta(get_the_ID(), 'pa_meta_comp1d', true); ?>

Математика -

if( is_numeric( $price1 ) ) {
    $a1 = $price1;
}
$b1 = $pcomp1d;
$sqft1 = str_replace( ',', '', $b1 );

if( is_numeric( $sqft1 ) ) {
    $b1 = $sqft1;
}

$a2 = $pcomp2f;
$price2 = str_replace( ',', '', $a2 );

if( is_numeric( $price2 ) ) {
    $a2 = $price2;
}
$b2 = $pcomp2d;
$sqft2 = str_replace( ',', '', $b2 );

if( is_numeric( $sqft2 ) ) {
    $b2 = $sqft2;
}

$a3 = $pcomp3f;
$price3 = str_replace( ',', '', $a3 );

if( is_numeric( $price3 ) ) {
    $a3 = $price3;
}
$b3 = $pcomp3d;
$sqft3 = str_replace( ',', '', $b3 );

if( is_numeric( $sqft3 ) ) {
    $b3 = $sqft3;
}
$ppsqft1 = ROUND($price1 / $sqft1);
$ppsqft2 = ROUND($price2 / $sqft2);
$ppsqft3 = ROUND($price3 / $sqft3);

$ppsav = ROUND((($ppsqft1 + $ppsqft2 + $ppsqft3)/3));

$b4 = $property_area;
$parea = str_replace( ',', '', $b4 );

if( is_numeric( $parea ) ) {
    $b4 = $parea;
}
$ehvp = $ppsav * $parea;
$homevalue = number_format($ehvp, 0, '.', ',');
echo '$' . $homevalue; ?>

И функции -

<?php if (class_exists('MRP_Multi_Rating_API')){ MRP_Multi_Rating_API::display_rating_result(array('rating_item_ids' => 2, 'show_count' => false, 'result_type' => 'value_rt', 'no_rating_results_text' => 'N/A'));} ?>

Так как я могу заставить это работать с ng-view и моими шаблонами partials?

ОБНОВЛЕНИЕ

Вот как выглядит моя текущая настройка - сначала у меня есть шаблон страницы с именем search-results.php -

<?php
/* Template Name:Search Results */ ?>
    <!DOCTYPE html>
<html>
<head>
    <base href="<?php $url_info = parse_url( home_url() ); echo trailingslashit( $url_info['path'] ); ?>">
        <title>Search</title>
<link rel="stylesheet" type="text/css" href="/style.css" media="print" />
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.3.0.min.js"></script>
    <?php wp_head(); ?>
</head>
<body>
    <div id="page" ng-app="app">
        <header>
            <h1>
                <a href="<?php echo home_url(); ?>">Search</a>
            </h1>
        </header>
  <?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

   <div ng-Cloak ng-controller="MyController" class="my-controller">
<div ng-view></div></div>
  <?php endwhile; ?>
 <?php endif; ?>
<?php rewind_posts(); ?>
<div ng-controller="OtherController" class="other-controller">
          <div class="text-center">
          <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="/partials/dirPagination.tpl.html"></dir-pagination-controls>
          </div>
        </div>
        <footer>
            &copy; <?php echo date( 'Y' ); ?>
        </footer>
    </div>
<script>
function getdata($scope,$http){
$http.get("/wp-json/posts?type=property")
.success(function(data)
{$scope.result = data;}
);
}
</script>

    <?php wp_footer(); ?>
</body>
</html>

Тогда мой скрипт приложения без вызова php-файла как частичного -

var app = angular.module('app', ['ngRoute', 'ngSanitize', 'angularUtils.directives.dirPagination'])

function MyController($scope) {


$scope.currentPage = 1;

$scope.pageSize = 2;

$scope.posts = [];


$scope.pageChangeHandler = function(num) {

console.log('search page changed to ' + num);
  };
}



function OtherController($scope) {

$scope.pageChangeHandler = function(num) {

console.log('going to page ' + num);
  };
}



app.config(function(paginationTemplateProvider) {
    paginationTemplateProvider.setPath('/partials/dirPagination.tpl.html');
});

app.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/search-results', {
        templateUrl: myLocalized.partials + 'main.html',
        controller: 'Main'
    })
    .when('/:ID', {
        templateUrl: myLocalized.partials + 'content.html',
        controller: 'Content'
    });
})
app.controller('Main', function($scope, $http, $routeParams) {
    $http.get('wp-json/posts?type=property').success(function(res){
        $scope.posts = res;
    });
})
app.controller('Content', function($scope, $http, $routeParams) {
    $http.get('wp-json/posts?type=property/?filter["posts_per_page"]=25&filter["orderby"]=date&filter["order"]=desc/' + $routeParams.ID).success(function(res){
        $scope.post = res;
    });
});


app.controller('MyController', MyController);
app.controller('OtherController', OtherController);

Тогда частичным файлом будет файл search.php с функциями и кодом, показанными в моем исходном вопросе.

1
Rich

1) URL переписать

Я симпатичный частичный к URL переписывает . Их легко устанавливать, настраивать, и вы получаете доступ ко всем WordPress.

В приведенном ниже классе вы можете видеть, что добавляются переписывает (вам нужно только очистить правила перезаписи один раз), и если часть URL-адреса совпадает, то разделы могут использоваться как динамические переменные (regEx -> query_vars ). Самое интересное в том, что вы можете в любое время убить запрос на возврат данных JSON или позволить WordPress сделать это в дополнение к указанию страницы template для использования.

Итак, мы собираемся включить внешний запрос для:

example.com/api/angular/partial/custom

в то, что мы можем использовать внутри как:

example.com/index.php?__api_angular=1&partial=custom

При регистрации переписать нужно добавить что-нибудь лишнее в regEx - но я думаю, что это понятно.

Этот класс можно добавить куда угодно ( functions.php / плагины ). Он создает себя и перехватывает то, что ему нужно, в init(). Лично мне нравится использовать класс, потому что код содержится, и он не будет конфликтовать, если класс определен где-то еще ... ну, он не будет воссоздавать класс, если он уже определен.

<?php

if ( ! class_exists( 'AngularEndpoint' ) ):

    class AngularEndpoint {
        const ENDPOINT_QUERY_NAME  = 'api/angular';
        const ENDPOINT_QUERY_PARAM = '__api_angular';

        // WordPress hooks

        public function init() {
            add_filter( 'query_vars', array ( $this, 'add_query_vars' ), 0 );
            add_action( 'parse_request', array ( $this, 'sniff_requests' ), 0 );
            add_action( 'init', array ( $this, 'add_endpoint' ), 0 );
        }

        // Add public query vars

        public function add_query_vars( $vars ) {

            // add all the things we know we'll use

            $vars[] = static::ENDPOINT_QUERY_PARAM;
            $vars[] = 'partial';
            $vars[] = 'filter';
            $vars[] = 'type';

            return $vars;
        }

        // Add API Endpoint

        public function add_endpoint() {
            add_rewrite_rule( '^' . static::ENDPOINT_QUERY_NAME . '/partial/([^/]*)/?', 'index.php?' . static::ENDPOINT_QUERY_PARAM . '=1&partial=$matches[1]', 'top' );

            //////////////////////////////////
            flush_rewrite_rules( false ); //// <---------- REMOVE THIS WHEN DONE
            //////////////////////////////////
        }

        // Sniff Requests

        public function sniff_requests( $wp_query ) {
            global $wp;

            if ( isset(
                $wp->query_vars[ static::ENDPOINT_QUERY_PARAM ],
                $wp->query_vars[ 'partial' ] ) ) {
                $this->handle_partial_request(); // handle it
            }
        }

        // Handle Requests

        protected function handle_partial_request() {
            global $wp;

            $partial_requested = $wp->query_vars[ 'partial' ];

            switch ( $partial_requested ) {

                // example.com/api/angular/partial/ping
                case 'ping':
                    wp_send_json_success( array (
                        'message' => 'Enjoy your partial', 'partial' => $partial_requested,
                    ) );
                    break;

                // example.com/api/angular/partial/custom
                case 'custom':
                    add_filter( 'template_include', function( $original_template ) {
                        return __DIR__ . '/custom.php';
                    } );
                    break;

                // example.com/api/angular/partial/search
                case 'search':
                    add_filter( 'template_include', function( $original_template ) {
                        return get_template_directory() . '/search.php';
                    } );
                    break;
                default:
                    wp_send_json_error( array ( 'message' => 'Invalid Request' ) );
            }
        }
    }

    $wpAngularEndpoint = new AngularEndpoint();
    $wpAngularEndpoint->init();

endif; // AngularEndpoint

custom.php Используется в качестве шаблона для example.com/api/angular/partial/custom

<html>
<body>
<h1>Custom Stuff</h1>
<h2><?php echo "PHP Stuff" ?></h2>
<?php
$posts = get_posts();
?>
<ul>
<?php
    foreach ( $posts as $post ) {
        echo '<li>' . $post->post_title . '</li>' . PHP_EOL;
    }
?>
</ul>
</body>
</html>

2) Маршрут отдыха

Другой вариант, так как вы уже используете wp-json, это создать пользовательский rest rest . Здесь требуется меньше настроек, что является плюсом.

<?php

if ( ! class_exists( 'AngularJSONEndpoint' ) ):

    class AngularJSONEndpoint {
        const ENDPOINT_NAMESPACE  = 'namespace/v2';

        /**
         * Initialize WordPress hooks
         */
        public function init() {
            add_action( 'init', array ( $this, 'add_endpoint' ), 0 );
        }

        /**
         * Add JSON API Endpoint
         */
        public function add_endpoint() {

            add_action('rest_api_init', function () {

                // http://example.com/wp-json/namespace/v2/angular?partial=custom

                register_rest_route( static::ENDPOINT_NAMESPACE, '/angular', array (
                    'methods'             => 'GET',
                    'callback'            => array($this, 'wp_json_namespace_v2__angular'),
                    'permission_callback' => function (WP_REST_Request $request) {
                        return true;
                    }
                ));
            });

            flush_rewrite_rules(true); // FIXME: <------- DONT LEAVE ME HERE
        }

        /**
         * Handle the endpoint
         * @param $request
         *
         * @return WP_REST_Response
         */
        function wp_json_namespace_v2__angular($request)
        {
            // json-api params

            $parameters = $request->get_query_params();

            // check for partial requests

            if(isset($parameters['partial'])){
                switch($parameters['partial']) {
                    case 'custom':
                        require __DIR__ . '/custom.php';
                        die();
                }
            }

            // return results

            $data = array(
                'success' => false,
                'message' => 'Bad Request'
            );

            return new WP_REST_Response($data, 400);
        }
    }

    $wpAngularJSONEndpoint = new AngularJSONEndpoint();
    $wpAngularJSONEndpoint->init();

endif; // AngularJSONEndpoint
1
jgraup

Что работает, так это вызов конечной точки Ajax в WP. Обратите внимание, что это не адрес вашей части, а фиксированный WP адрес для всех AJAX вызовов

wp_localize_script('handle', 'myLocalized', array(
     'ajaxUrl' => admin_url( 'admin-ajax.php' )
) );

предоставляет адрес конечной точки в объекте JS myLocalized. Вы отправляете все запросы на эту страницу и относитесь к своим частям только как параметры GET:

$routeProvider.when('/search-results', {
    templateUrl: myLocalized.ajaxUrl + '?action=get_my_partial&partial=' + 'main';
    controller: 'Main'
}).when('/:ID', {
    templateUrl: myLocalized.ajaxUrl + '?action=get_my_partial&partial=' + 'content';
    controller: 'Content'
});

Все вызовы admin-ajax.php с параметром {action} направляются на действия с именами wp_ajax_{action} (для зарегистрированных пользователей) или wp_ajax_nopriv_{action} (для пользователей, не вошедших в систему). На стороне сервера вы можете подключиться к ним и включить ваши партиалы:

function get_the_partials () {
    switch ( $_GET['partial'] ) {
        case 'main':
            // check authorization
            include plugin_dir_path(__FILE__) .'/partials/main.html';
            break;
        case 'content':
            // check authorization
            include plugin_dir_path(__FILE__) .'/partials/content.html';
            break;
        default:
            wp_die( 'Nothing found.' );
            break;
    }
    die();
}
add_action( 'wp_ajax_nopriv_get_my_partial', 'get_the_partials' );
add_action( 'wp_ajax_get_my_partial', 'get_the_partials' );

Таким образом, WordPress полностью инициализируется и может обрабатывать любые функции, обычно доступные. (Ну, вне цикла.)

Поскольку вы обрабатываете выбор определенных сообщений из контроллера и через конечную точку wp-json, это должно быть сделано.

1
ccprog