كيفية بناء مظهر لتطبيق الويب الخاص بك باستخدام React و WordPress

لقد دربت نفسك كمهندس ويب ، وتريد الآن إنشاء متجر سريع عبر الإنترنت لعملائك. يجب أن تظهر قائمة المنتجات في لحظة ، ويجب ألا يضيع البحث أكثر من جزء من الثانية أيضًا. هل هذه مادة أحلام اليقظة؟

ليس بعد الآن. حسنًا ، على الأقل لا يمكن تحقيق أي شيء باستخدام مزيج من WordPress 'REST API و React ، مكتبة JavaScript حديثة.

انتظر ماذا؟ WordPress REST API؟

نعم ، ستساعدك واجهة برمجة تطبيقات WordPress REST على بناء الأساس الخلفي لتطبيق الويب الخاص بك. يعد هذا اختيارًا جيدًا لتقنية الواجهة الخلفية لتطبيق الويب الخاص بك إذا كنت تقوم ببناء حل يعتمد على المحتوى. سوف يتفاعل WordPress بسلاسة مع التقنيات الأخرى أيضًا ؛ يمكنك استخدام Node.js كمحور لتطبيقك للاتصال بخدمات RESTful الأخرى.

يعد WordPress REST API مغيرًا للعبة لـ WordPress ، والذي يمكن الآن تسميته بأمان إطار تطبيق الويب - وليس مجرد CMS. الآن بعد أن تم فصل الواجهة الأمامية والخلفية تمامًا ، يمكن استخدام WordPress كواجهة خلفية لتطبيق الهاتف المحمول أو كخلفية لأي نظام يركز على المحتوى.

لكن لماذا WordPress؟ السبب: ستندهش من الوظائف التي تظهر خارج الصندوق مع WordPress. ستحصل على إدارة مستخدم شاملة وإدارة وسائط ومجموعة من واجهات برمجة التطبيقات سهلة الاستخدام بشكل لا يصدق لتوسيع نطاق عملك.

في هذه المقالة ، سوف أطلعك على بناء سمة WordPress SPA (تطبيق صفحة واحدة) باستخدام مكتبة JavaScript تسمى React ، والاتصال بواجهة WP REST API.

دعنا ننتقل إلى بناء الموضوع

تفترض هذه المقالة أنك على دراية بالعديد من واجهات برمجة تطبيقات WordPress الحالية ، لا سيما تلك التي تقود تطوير السمات لجماليات موقعك ووظائف المكونات الإضافية لموقعك. أفترض أيضًا أنك قمت بإعداد منصة التطوير الخاصة بك لـ WordPress ، مثل حزمة LAMP في بيئة Linux أو MacOS.

للتبسيط ، على الرغم من ذلك ، سأشير فقط إلى المسارات المطلقة كما تظهر في النظام الأساسي XAMPP المستخدم مع Windows.

الآن ، دعنا ننشئ مثيلًا من WordPress في مضيفنا المحلي ، ونطلق عليه اسم "Celestial". هذا هو اسم سمة WordPress التي سنستخدمها لمساعدتنا في تحديد الاتجاه لبناء سمات مستقبلية جاهزة للاستخدام مع تطبيقات الويب المدعومة من WordPress REST API. قد تكون على دراية بالتسلسل الهرمي للقوالب المحبوبة جدًا في WordPress ، ولكن مع واجهة برمجة تطبيقات REST ، لديك فرصة لاكتشاف شيء مختلف!

نحتاج بعد ذلك إلى إنشاء مجلد للموضوع داخل مجلد wp-content\themes theme. انتقل إلى C:\xampp\htdocs\celestial\wp-content\themes\ (أو ما يعادله) وأنشئ مجلدًا celestial . أضف هذه الملفات داخل مجلد السمة celestial :

1. index.php
   ملف استقبال الرسائل الخاطئة للموضوع.
2. style.css
   يحتوي هذا على معلومات حول الموضوع (وليس CSS الفعلي).
3. functions.php
   لكتابة وظائف واستيراد ملفات CSS و JS.

أضف ملف صورة باسم screenshot.jpg إذا كنت تريد أن تظهر صورة لموضوعك داخل لوحة القيادة.

ملاحظة : يتكون الكود الخاص بكل ملف من بضعة أسطر ويمكن العثور عليه على GitHub .

بعد ذلك ، قم بتسجيل الدخول إلى لوحة معلومات WordPress الخاصة بك ، وتوجه إلى Appearance → Themes وحدد `` Celestial '' كموضوع. الآن بعد أن تم وضع الأساس ، دعنا نبدأ في إنشاء السمة.

الشروع في استخدام React و Webpack للموضوع

React هي مكتبة واجهة مستخدم شائعة جدًا يدعمها ويحتفظ بها Facebook. وفقًا لنتائج استبيان المطورين لعام 2017 الذي أجرته Stack Overflow ، "فإن React هي الأكثر تفضيلًا بين المطورين".

لبدء المشروع ، تحتاج إلى تهيئة المشروع كمشروع NPM (Node Package Manager). يتم ذلك باستخدام الأمر npm init في الجهاز الطرفي (بعد تثبيت Node.js و NPM على جهاز الكمبيوتر الخاص بك). سيطالبك بدء المشروع بمعلومات تكوين معينة. بعد التهيئة الناجحة ، ستنشئ NPM ملف package.json في الدليل الجذر للقالب. سيتضمن هذا الملف تفاصيل المشروع وجميع تبعيات المشروع.

React الآن تحت ترخيص MIT ، لذلك سنستخدم الإصدار 16 من React كمكتبة JavaScript لهذا المشروع. يحتوي React على بعض الميزات الرائعة تحت الغطاء ، مثل Virtual DOM (تمثيل للمستند داخل الذاكرة) ويحتوي على مجموعة من الأدوات المحيطة به مثل React Router. تُستخدم React أيضًا في Project Calypso في WordPress - لوحة القيادة في WordPress.com.

سنقوم الآن بتثبيت حزم NPM المطلوبة للمشروع:

1. اكتب npm install --save react react-dom في المحطة واضغط على إدخال لتثبيت الحزم.

   

   نظرًا لأننا نبني السمة كتطبيق صفحة واحدة (SPA) ، فنحن بحاجة إلى مساعدة أداة مثل Webpack. سنقوم بكتابة التعليمات البرمجية كمكونات مختلفة ، وسيساعدنا Webpack في تجميعها معًا وإخراجها كملف .js أو .css واحد. باختصار ، إنها وحدة تجميع.
   
   يجب أولاً تثبيت Webpack عالميًا على جهاز الكمبيوتر الخاص بك. للقيام بذلك ، يمكننا مرة أخرى الاستفادة من NPM.
2. اكتب الأمر npm install -g webpack للحصول على أحدث إصدار ثابت من Webpack مثبت عالميًا في نظامك.
   
   بعد ذلك ، سنقوم بتثبيت حزم NPM التي تدعم Webpack في تطبيقنا.
3. انتقل إلى ملف package.json في git repo وانسخ بقية التبعيات من هناك إلى قسم التبعيات package.json . ثم قم بتشغيل npm install مرة أخرى لتثبيت جميع الحزم داخل package.json .

    { "name": "celestial", "version": "1.0.0", "description": "A basic theme using the WordPress REST API and React", "main": "index.js", "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "image-webpack-loader": "^3.4.2", "node-sass": "^4.5.3", "path": "^0.12.7", "react": "^16.0.0", "react-dom": "^16.0.0", "react-router-dom": "^4.2.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.6.0" }, "devDependencies": {}, "scripts": { "build": "webpack", "watch": "webpack --watch" }, "keywords": [ "blog", "decoupled", "react", "rest-api" ], "author": "Muhammad Muhsin", "license": "GPL-3.0" }

   
   ما سبق هو قائمة بجميع الحزم المطلوبة في ملف package.json لهذا المشروع.
4. انسخ التكوينات من GitHub والصقها في ملف webpack.config.js لمجلد القالب.

    var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require('path'); module.exports = { entry: { app: './src/index.jsx' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader','sass-loader'], publicPath: 'dist' }) }, { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'file-loader?name=[name].[ext]&outputPath=images/&publicPath=https://localhost/celestial/wp-content/themes/celestial/dist/images', 'image-webpack-loader' ] }, { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' }, { test: /\.(ttf|eot)$/, loader: 'file-loader?name=fonts/[name].[ext]' } ] }, resolve: { extensions: ['.js', '.jsx'] }, plugins: [ new ExtractTextPlugin({ filename: "style.css", allChunks: true }) ] }

   
   هام : يرجى ملاحظة أن module.exports → module → rules[3] → use → publicPath يمكن أن تتغير وفقًا لمكان وجود صور توزيع مشروعك في المضيف المحلي. إذا كان هذا خطأ ، فقد لا يتم عرض الصور بشكل صحيح في تطبيق الويب.
5. بعد ذلك ، يمكن استخدام هذه الأوامر لتجميع المشروع:
   • webpack أو npm run build لتجميع المشروع ، أو
   • webpack --watch npm run watch لتجميع المشروع ومراقبة التغييرات.

ملاحظة : للحصول على فهم أفضل لـ Webpack ، اقرأ هذا المقال الذي كتبه جوزيف زيمرمان في مجلة Smashing Magazine .

تمديد واجهة برمجة تطبيقات WordPress REST

تأتي واجهة برمجة تطبيقات WordPress REST مع العديد من نقاط النهاية المختلفة لجلب المنشورات والصفحات والوسائط وما إلى ذلك. ومع ذلك ، قد لا يكون لديهم دائمًا جميع التفاصيل في ردهم. على سبيل المثال ، لا تعطي طريقة posts عنوان URL للصورة المميزة أو اسم المؤلف. لذلك ، يتعين علينا إجراء مكالمات منفصلة لكل عنصر من هذه العناصر.

ولكن ماذا لو أردت أن تظهر بياناتك الخاصة في رد المنشورات؟ هذا هو المكان الذي يأتي فيه سحر توسيع واجهة برمجة تطبيقات REST. سيضيف الكود التالي متغيرين إضافيين في الاستجابة لطلب المنشورات ، وهما author_name و featured_image_src . الكود موجود داخل ملف jobs.php :

 // Add various fields to the JSON output function celestial_register_fields() { // Add Author Name register_rest_field( 'post', 'author_name', array( 'get_callback' => 'celestial_get_author_name', 'update_callback' => null, 'schema' => null ) ); // Add Featured Image register_rest_field( 'post', 'featured_image_src', array( 'get_callback' => 'celestial_get_image_src', 'update_callback' => null, 'schema' => null ) ); // Add Published Date register_rest_field( 'post', 'published_date', array( 'get_callback' => 'celestial_published_date', 'update_callback' => null, 'schema' => null ) ); } add_action( 'rest_api_init', 'celestial_register_fields' ); function celestial_get_author_name( $object, $field_name, $request ) { return get_the_author_meta( 'display_name' ); } function celestial_get_image_src( $object, $field_name, $request ) { if($object[ 'featured_media' ] == 0) { return $object[ 'featured_media' ]; } $feat_img_array = wp_get_attachment_image_src( $object[ 'featured_media' ], 'thumbnail', true ); return $feat_img_array[0]; } function celestial_published_date( $object, $field_name, $request ) { return get_the_time('F j, Y'); }

متغير جافا سكريبت عالمي

هناك بعض ثوابت WordPress (أو المعروفة باسم "المتغيرات") التي سنستخدمها في تطبيق React. ستكون هذه معلومات حول المسارات المختلفة للتطبيق (ولاحقًا طرق WooCommerce المحددة).

يتم تعريف هذا المتغير داخل ملف function.php . سيُطلق عليه "CelestialSettings" وسيتم إلحاقه بالنصوص celestial-scripts ، وهو مقبض ملف app.js المدرج في قائمة الانتظار:

 wp_enqueue_script( 'celestial-script', get_stylesheet_directory_uri() . '/dist/app.js' , array(), '1.0', true ); $url = trailingslashit( home_url() ); $path = trailingslashit( parse_url( $url, PHP_URL_PATH ) ); wp_scripts()->add_data( 'celestial-script', 'data', sprintf( 'var CelestialSettings = %s;', wp_json_encode( array( 'title' => get_bloginfo( 'name', 'display' ), 'path' => $path, 'URL' => array( 'api' => esc_url_raw( get_rest_url( null, '/wp/v2' ) ), 'root' => esc_url_raw( $url ), ), 'woo' => array( 'url' => esc_url_raw( 'https://localhost/celestial/wp-json/wc/v2/' ), 'consumer_key' => 'ck_803bcdcaa73d3a406a0f107041b07ef6217e05b9', 'consumer_secret' => 'cs_c50ba3a77cc88c3bf46ebac49bbc96de3a543f03' ), ) ) ) );

يُظهر الكود أعلاه مثالاً لإحضار متغيرات WordPress (PHP) إلى الواجهة الأمامية ، وهي تقنية مهمة ومفيدة جدًا عند إنشاء سمة منفصلة. يحمل متغير الكائن هذا عنوان الموقع والمسار وعنوان URL لواجهة برمجة التطبيقات والجذر وثلاثة متغيرات متعلقة بـ WooCommerce (موضح لاحقًا).

رد فعل و JSX

يختلف React عن باقي مكتبات JavaScript الرئيسية. ما أعنيه بذلك هو أننا نكتب JavaScript بشكل عام ضمن HTML الخاص بنا. ومع ذلك ، عندما يتعلق الأمر بـ React ، فإننا نكتب HTML داخل كود JavaScript الخاص بنا. لتكون أكثر دقة ، نكتب JSX داخل JS. JSX مشابه جدًا لـ HTML ولكن به بعض الاختلافات. تمت كتابة سمة class كـ className على سبيل المثال. يتم تحويل هذا بعد ذلك إلى JavaScript عادي من خلال Webpack و Babel وحفظه داخل app.js.

ومع ذلك ، هناك بعض القيود على كتابة JSX. على سبيل المثال ، يمكن أن يكون لدينا عنصر واحد فقط داخل طريقة العرض render() ، والتي ستكون بمثابة العنصر الجذر للمكون. ومع ذلك ، فإن الميزة هي أنه من الأسهل تصحيح الأخطاء. يمكننا أن نعرف بالضبط أين ارتكبنا خطأ ، بينما في HTML العادي لن يظهر خطأنا بشكل صريح بشكل عام. سنكتب JSX لهذا المشروع ، وبالتالي ، سيكون لملفات JavaScript امتداد .jsx . ومع ذلك ، يمكن أيضًا أن يكون .js إذا كنت تفضل ذلك.

قم بإنشاء الملفات التالية داخل مجلد src :

1. index.jsx (الملف الرئيسي والملف الذي يحتوي على تكوينات React Router)
2. header.jsx (مكون الرأس)
3. footer.jsx (مكون التذييل)
4. posts.jsx (لأرشيف المشاركات)
5. post-list.jsx (مكون لمنشور فردي داخل posts.jsx )
6. post.jsx (لمنشور واحد)
7. products.jsx (يحتوي على جميع المنتجات من WooCommerce)
8. product.jsx (يعرض منتجًا واحدًا من WooCommerce)
9. style.scss (لتحتوي على كافة أكواد CSS بتنسيق SASS)

ReactDOM.render ()

ملف index.jsx هو جذر المشروع. ما أعنيه بذلك هو أن index.jsx يحتوي على التطبيق المكون الذي يتم تقديمه إلى DOM.

 import { render } from 'react-dom'; // importing render from ReactDOM const App = () => ( // defining the routes <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> // the root path </Switch> </div> <Footer /> </div> ); // React Router const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( // rendering to the DOM by replacing #page with the root React component (routes), document.getElementById('page') // rendering the route );

المكونات الأخرى محددة في React Router وسيتم تحميلها عند زيارة المسارات المختلفة.

هذه هي الطريقة التي نكتب بها المكونات المعيارية حيث تنتهي جميع المكونات المختلفة في النهاية عند index.jsx .

الدولة مقابل المكونات عديمة الجنسية

كنت ستلاحظ أن المكونات تتم كتابتها بإحدى الطريقتين التاليتين:

1. const App = () => (
2. class Post extends React.Component {

الطريقة الأولى هي كيف نكتب المكونات عديمة الجنسية والطريقة الثانية هي مثال على المكونات ذات الحالة. عديم الحالة يعني أن هذا المكون لا يحتوي على "حالة" فيه. "الحالة" هي في الأساس متغير يحتوي على معلومات داخل المكون ، وفي كل مرة يتغير المتغير ، تتم إعادة تقديم المكون. تُعرف المكونات ذات الحالة أيضًا باسم "المكونات الذكية". وهكذا تُستخدم متغيرات الحالة للتواصل الداخلي داخل هذا المكون.

النوع الثاني ، المكونات عديمة الحالة لا تحتوي على متغير الحالة فيها وتسمى أحيانًا "المكونات الغبية". ومع ذلك ، مثل Stateful Components ، لديهم "props" ، وهي خصائص تنتقل إليهم من المكونات الأصلية.

تحتوي المكونات ذات الحالة على طرق دورة حياة React بينما تحتوي المكونات عديمة الحالة على طريقة العرض render() فقط وهي الطريقة الافتراضية لها.

طرق دورة حياة التفاعل

يتم استدعاء هذه الطرق في مراحل مختلفة من دورة حياة المكون ، والتي يمكننا تجاوزها لتشغيل الكود الخاص بنا في تلك الحالات. نحن نستخدم الطرق التالية في تطبيقنا:

• constructor()
  تم استدعاؤه قبل تركيب المكون.
• componentDidMount()
  يتم استدعاؤه على الفور بعد تركيب أحد المكونات.
• render()
  الطريقة التي يتم استدعاؤها لعرض محتوى JSX (HTML).
• componentDidUpdate()
  يتم استدعاؤه عند تحديث المكون.
• componentWillUnmount()
  يتم استدعاؤه عند إزالة أحد المكونات.

ملاحظة : لمعرفة المزيد حول المكونات ودورة حياتها ، اقرأ الوثائق هنا .

وعود جافا سكريبت

سنستخدم وعود JavaScript للحصول على البيانات من WordPress REST API. أولاً ، لدينا عنوان URL لواجهة برمجة تطبيقات REST في ملف Functions.php الخاص بنا ، حيث قمنا بإلحاقه كمتغير JavaScript يمكننا الوصول إليه من الواجهة الأمامية.

سنستخدم طريقة جلب API لجافا سكريبت للحصول على البيانات من نقاط النهاية المختلفة. نضيف أداة تحميل لإظهار المستخدم أثناء جلب المحتوى:

 getMorePosts() { var that = this; var totalPages; // adding a loader jQuery("#loader").addClass("active"); this.setState({ page: this.state.page + 1 }); fetch(CelestialSettings.URL.api + "/posts/?page=" + this.state.page) .then(function (response) { for (var pair of response.headers.entries()) { // getting the total number of pages if (pair[0] == 'x-wp-totalpages') { totalPages = pair[1]; } if (that.state.page >= totalPages) { that.setState({ getPosts: false }) } } if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then(function (results) { var allPosts = that.state.posts.slice(); results.forEach(function (single) { allPosts.push(single); }) that.setState({ posts: allPosts }); // removing the loader jQuery("#loader").removeClass("active"); }).catch(function (error) { console.log('There has been a problem with your fetch operation: ' + error.message); jQuery("#loader").remove(); }); }

باستخدام جهاز التوجيه React

React Router هي المكتبة التي ستتعامل مع التوجيه من جانب العميل لتطبيقنا. التوجيه من جانب الخادم ممكن باستخدام WordPress ، ولكن لتحقيق تجربة SPA حقيقية ، نحتاج إلى مساعدة React Router.

منذ الإصدار 4 ، تم تقسيم React Router إلى ثلاث حزم: react-router التفاعلي ، react-router-dom ، react-router-native . react-router-dom لهذا المشروع لأن هذا هو المستخدم في تطبيقات الويب.

نظرًا لأنه تم تثبيت react-router-dom بالفعل ، يمكننا كتابة تكوين جهاز التوجيه داخل ملف index.jsx . سيكون الرمز كما يلي:

 const App = () => ( <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> <Route exact path={CelestialSettings.path + 'posts/:slug'} component={Post} /> <Route exact path={CelestialSettings.path + 'products'} component={Products} /> <Route exact path={CelestialSettings.path + 'products/:product'} component={Product} /> <Route path="*" component={NotFound} /> </Switch> </div> <Footer /> </div> ); // Routes const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( (routes), document.getElementById('page') );

سيهتم الكود أعلاه بجميع عمليات التوجيه ، التي يتم التعامل معها من جانب العميل. تشير * في السطر الأخير إلى أن أي مسار آخر غير مذكور أعلاه سينقل المستخدم إلى صفحة "404 غير موجود".

تُستخدم علامة <Link to=""> بدلاً من علامة <a href=””> للربط بين الصفحات المختلفة باستخدام React Router:

 <div className="navbar-nav"> <Link className="nav-item nav-link active" to={CelestialSettings.path} >Home <span className="sr-only">(current)</span></Link> <Link className="nav-item nav-link" to={CelestialSettings.path + "products/"} >Products</Link> </div>

الحصول على بيانات الاختبار

الآن بعد أن أنشأت السمة ، حان الوقت لإضافة بعض البيانات. تتمثل إحدى طرق إضافة البيانات في إنشاء المحتوى الخاص بنا. ومع ذلك ، هناك طريقة أسهل (وأفضل) لإضافة البيانات إلى موقع WordPress الخاص بنا. تستورد هذه الطريقة بيانات العنصر النائب من مصدر خارجي:

• توجه إلى https://codex.wordpress.org/Theme_Unit_Test وقم بتنزيل بيانات اختبار وحدة السمة
• توجه إلى Tools> Import> WordPress لتثبيت أداة استيراد WordPress.
• بعد تثبيت أداة استيراد WordPress ، انقر فوق تشغيل المستورد.
• انقر فوق "اختيار ملف" في المستورد
• حدد الملف الذي تم تنزيله واستورد بيانات اختبار وحدة سمة WordPress

الآن عليك تحديد ملف theme-unit-test-data.xml وجميع محتوى العنصر النائب موجود الآن على موقعك.

تكامل WooCommerce

الآن ، نحن جاهزون لتشغيل متجرنا باستخدام React. سنستخدم ملفي products.jsx و product.jsx لهذا الغرض ، اللذين يشبه رمزهما posts.jsx و p ost.jsx على التوالي.

سنضيف ثلاثة متغيرات أخرى إلى CelestialSettings ضمن "woo" (انظر متغير JavaScript عالمي):

1. URL
2. consumer_key
3. consumer_secret

يجب إنشاء مفتاح المستهلك وسر المستهلك من Dashboard → WooCommerce → Settings → API → Keys / Apps .

بالنسبة إلى عنوان URL woo ، يجب عليك إضافته يدويًا (نظرًا لأن WooCommerce يسمح بالنقل عبر SSL فقط ، أضف عنوان URL باستخدام https ، أي https://localhost/celestial/wp-json/wc/v2/ ).

انسخ مفتاح المستهلك وسر المستهلك والصقه في الأماكن المناسبة داخل jobs.php . سيكون هذا بمثابة المصادقة للوصول إلى WooCommerce عبر استدعاء API.

قم بزيارة وثائق WooCommerce REST API للحصول على مزيد من المعلومات حول واجهة برمجة التطبيقات الخاصة بها. يحتوي ملف products.jsx على رمز لملء المتجر بالمنتجات. يمكن إضافة المنتجات بواسطة مسؤول من لوحة القيادة. ما عليك سوى الانتقال إلى لوحة التحكم > المنتجات > إضافة جديد وإدخال تفاصيل المنتج.

عند النقر فوق منتج معين ، سيتم نقلك إلى صفحة product.jsx :

رمز الصفحة أعلاه مشابه لـ post.jsx :

 renderProduct() { return ( <div className="card"> <div className="card-body"> <div className="col-sm-4"><img className="product-image" src={this.state.product.images ? this.state.product.images[0].src : null} alt={this.state.product.images ? this.state.product.images[0].alt : null } /></div> <div className="col-sm-8"> <h4 className="card-title">{this.state.product.name}</h4> <p className="card-text"><strike>${this.state.product.regular_price}</strike> <u>${this.state.product.sale_price}</u></p> <p className="card-text"><small className="text-muted">{this.state.product.stock_quantity} in stock</small></p> <p className="card-text">{jQuery(this.state.product.description).text()}</p> </div> </div> </div> ); }

الروابط الثابتة

لكي يعمل السمة بشكل صحيح ، يتعين علينا تعيين الروابط الثابتة التالية داخل لوحة القيادة → الإعدادات → الروابط الثابتة :

1. ضمن الإعدادات العامة → الهيكل المخصص : https://localhost/celestial/posts/%postname%/

2. ضمن الروابط الثابتة للمنتج → القاعدة المخصصة : /products/

إذا لم تقم بتعيين الروابط الثابتة على النحو الوارد أعلاه ، فقد لا يعمل السمة بالشكل المطلوب.

إصلاح WooCommerce

عندما تنتقل إلى المضيف المحلي / السماوي / المنتجات ، فمن المحتمل أنك ستحصل على مساحة فارغة حيث من المفترض أن يتم تحميل المنتجات. يحدث هذا لأن WooCommerce يحتاج إلى طلبات مصادقة بينما مضيفنا المحلي ليس https. لإصلاح المشكلة:

1. قم بزيارة https: // localhost / celestial / wp-json / wc / v2 / products. هذا سوف يعطينا تحذير:

1. انقر فوق متقدم> المتابعة إلى المضيف المحلي (غير آمن) .
2. الآن ، إذا عدت إلى صفحة المنتجات ، فسيتم عرض العناصر بشكل صحيح.

ملاحظة : إذا كنت تستخدم Valet على جهاز Mac ، فيجب عليك تشغيل Valet Secure على موقعك لتأمين الموقع المحلي بشهادة TLS. هذه طريقة أخرى لإصلاح المشكلة.

ما هو سكرول ماجيك؟

ScrollMagic هي مكتبة تسمح لنا بتنفيذ إجراءات معينة عند التمرير عبر الصفحة. لاستخدام ScrollMagic سنقوم بإدراج مكتبة ScrollMagic JavaScript في قائمة Functions.php . نحن نستخدم ScrollMagic في حالتين في هذا المشروع:

1. لتحميل المشاركات بشكل كسول داخل مكون posts.jsx :

    componentDidMount() { var that = this; window.onbeforeunload = function () { window.scrollTo(0, 0); } // init ScrollMagic Controller that.state.controller = new ScrollMagic.Controller(); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#colophon", triggerHook: "onEnter" }) .addTo(that.state.controller) .on("enter", function (e) { if (that.state.getPosts && that.getMorePosts !== null) { that.getMorePosts(); } }); }

   
   عمليات التحميل الكسولة داخل مكون posts.jsx
2. لإظهار رسم متحرك خفوت للمنشورات التي تظهر من خلال التمرير عبر المنشورات والمنتجات في مكونات posts.jsx و products.jsx على التوالي:

    componentDidUpdate() { var FadeInController = new ScrollMagic.Controller(); jQuery('.posts-container .col-md-4.card-outer').each(function () { // build a scene var FadeInScene = new ScrollMagic.Scene({ triggerElement: this.children[0], reverse: false, triggerHook: 1 }) .setClassToggle(this, 'fade-in') .addTo(FadeInController); }); }

   
   تطبيق رسم متحرك يتلاشى للداخل للمشاركات التي تظهر أثناء حدوث التمرير

نحن الآن جاهزون لعرض موضوعنا من الواجهة الأمامية. انتقل إلى المضيف المحلي / السماوي على متصفح الويب الخاص بك وشاهد المظهر الخاص بك أثناء العمل.

وربت على نفسك على الظهر ، لأنك نجحت الآن في إنشاء السمة!

سمات WordPress الأخرى مع مكتبات JavaScript

إذا وجدت هذا مفيدًا ، فيمكنك إلقاء نظرة على سمات WordPress الرائعة الأخرى المنفصلة والتي تم إنشاؤها باستخدام مكتبات / أطر عمل JavaScript حديثة:

• Foxhound: أول سمة منفصلة للوصول إلى مستودع سمات WordPress. هذا الموضوع الذي كتبه كيلي دوان يستخدم React و Redux و React Router.
• Anadama React: سمة أخرى لنفس المؤلف ، ولكن باستخدام Flux بدلاً من Redux ، و Page بدلاً من React Router.
• والاس: كتبه كيربي ، يستخدم هذا المظهر Angular مع WordPress REST API.
• Picard: كتب بواسطة Automattic أنفسهم لعرض قدرة واجهة برمجة تطبيقات WordPress REST.
• رد الفعل الآية: موضوع رد الفعل والإحياء كتبته بناءً على Foxhound.

الخطوات التالية

الأقسام الرئيسية التي أردت أن أوضحها لك قد انتهيت الآن. يمكنك الاستمرار في بناء المشروع لمزيد من المعرفة. هذه بعض التوصيات التي يمكنك اتباعها:

1. متجر متكامل مع البرنامج المساعد WooCommerce ، بما في ذلك الخروج وعربة التسوق ؛
2. صفحة لكل من الأرشيف والعلامة والتصنيف وما إلى ذلك ؛
3. إدارة الدولة مع Redux أو Flux.
   

حظًا سعيدًا ، وترميزًا سعيدًا!